vite+vue3项目如何集成 tailwindcss

1.为什么要使用tailwindcss

Tailwind CSS 是一种实用优先的 CSS 框架，具备多种优点，以下是一些主要优点： 快速开发：使用 Tailwind CSS，开发者可以通过添加类名快速构建 UI，而无需编写自定义 CSS。这加快了开发速度，并减少了上下文切换。 灵活性：Tailwind 提供了丰富的类，开发者可以根据需要自由组合，满足各种设计需求。 易于维护：由于 Tailwind CSS 采用类名组合的方式，而不是在组件外部定义样式，因此代码维护起来更加简单清晰，减少了样式冲突和覆盖问题。 响应式设计：Tailwind 提供了内置的响应式设计支持，开发者可以使用简单的类名来控制不同屏幕大小下的样式，便于创建适应各种设备的布局。

2.安装依赖并生成配置文件

yarn add tailwindcss@latest postcss@latest autoprefixer@latest --dev

npx tailwindcss init -p

如果执行npx指令的时候--报错

npm ERR! could not determine executable to run

改为执行

yarn add tailwindcss@3 postcss autoprefixer --dev

npx tailwindcss init -p 

命令执行完后，根目录下会生成两个文件

postcss.config.js 和 tailwind.config.js

3.配置模版路径

在 tailwind.config.js 文件中添加所有模板文件的路径。

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

4.将 Tailwind 指令添加到你的 CSS

本人的是在入口文件main.ts的同级目录下创建了一个css文件tailWindCss.css(名字可以自己起)

tailWindCss.css的文件内容如下

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

5.vite.config.ts中配置

import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";

6.入口文件main.ts中引入即可使用了

7.插件推荐

适用于使用vite创建的vue或者react项目！