vue3 项目中引入tailwindcss

本文主要是介绍vue3 项目中引入tailwindcss，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。

官网：https://www.tailwindcss.cn/docs/installation

在项目中使用过程如下：

• 安装 tailwindcss

npm i -D tailwindcss@latest

• 创建tailwind.config.js 配置文件

npx tailwindcss init 

• 在tailwind.config.js 进行配置

/** @type {import('tailwindcss').Config} */
module.exports = {//  配置要加载的模块content: ['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],theme: {extend: {},},plugins: [],
}

• 在src下创建一个tailwindcss模块，创建index.css模块，写如下代码：

@tailwind base;
@tailwind components;
@tailwind utilities;

• 在main.ts 中 引入tailwindcss

import './tailwindcss/index.css'

• 在组件中应用

<template><div class="w-screen h-screen bg-red-300 flex justify-center items-center text-blue-100">应用 tailwindcss，官网参考文档如下：https://www.tailwindcss.cn/docs/installation</div>
</template>

这篇关于vue3 项目中引入tailwindcss的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---