vite安装tailwindcss

在Vite项目中安装Tailwind CSS，首先需要确保已经全局安装了Node.js和npm或yarn。然后按照以下步骤操作：

1. **创建新项目**：
使用Vite CLI创建一个新的项目，打开终端并运行：

   npm create vite my-vite-project 或 yarn create vite my-vite-project

2. **进入项目目录**：
安装完成后，导航到项目文件夹：

   cd my-vite-project

3. **安装依赖**：
运行以下命令安装Tailwind CSS及其相关的postcss插件（如`@tailwindcss/postcss`）：

   npm install tailwindcss @tailwindcss/postcss autoprefixer --save-dev 或
   yarn add tailwindcss @tailwindcss/postcss autoprefixer -D

如果你想自定义配置，可以添加`postcss.config.js`文件，如果没有就默认会有一个基本配置。

4. **配置Tailwind CSS**：
Vite默认的CSS处理配置一般是在`.vite/config.js`中，找到`build`部分，加入Tailwind CSS的相关配置，例如：

   import { defineConfig } from 'vite';
   import tailwindcss from 'tailwindcss';

   export default defineConfig({
     build: {
       postcss: () => ({
         plugins: [tailwindcss('./tailwind.config.js')],
       }),
     },
   });

确保`tailwind.config.js`位于项目根目录下，并根据你的需求设置配置项。

5. **启用CSS模块化**（可选）：
如果你希望使用CSS模块，可以在`vite.config.js`中启用CSS Modules：

   build: {
     css: {
       modules: true,
       generateScopedName: '[name]__[local]_[hash:base64:8]',
     },
   },

6. **构建应用**：
完成上述步骤后，运行`npm run dev`或`yarn dev`启动Vite开发服务器。现在你应该能在浏览器中看到 Tailwind CSS的效果了。