TailwindCSS在vite项目中的安装与使用

# 安装Vite
npm create vite@latest my-app --template vanilla-ts
 
# 进入项目目录
cd my-app
 
# 安装Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
 
# 使用Tailwind CSS初始化
npx tailwindcss init -p
 
# 安装vite-plugin-tailwind
npm install -D vite-plugin-tailwind
 
# 安装完成后，可以在src/index.html中引入Tailwind CSS
# <link rel="stylesheet" href="./index.css" />
 
# 在vite.config.ts中配置vite-plugin-tailwind
// vite.config.ts
import { defineConfig } from 'vite'
import tailwind from 'vite-plugin-tailwind'
 
export default defineConfig({
  plugins: [tailwind()]
})
 
# 接下来，您可以在项目中的任何.ts或.tsx文件中使用Tailwind CSS类了

在这个例子中，我们首先创建了一个使用TypeScript的Vite项目。然后，我们通过npm安装了Tailwind CSS以及必要的PostCSS插件和自动前缀器。使用tailwindcss init -p命令生成了默认的Tailwind配置文件。接下来，我们安装了vite-plugin-tailwind插件，以便在Vite构建过程中使用Tailwind CSS。最后，我们在HTML文件中引入了Tailwind CSS，并在Vite的配置文件中启用了插件。这样就可以在项目中使用Tailwind CSS了。