vite+vue3/react使用tailwindcss

vite+vue3/react使用

1.通过 npm 安装 Tailwind

npm install -D tailwindcss postcss autoprefixer

2.创建您的配置文件

npx tailwindcss init -p

pnpm请使用 pnpm dlx tailwindcss@3 init

这将会在您的工程根目录创建一个最小的 tailwind.config.js 文件 和 postcss.config.js（如果没有 请手动创建这个文件 export default { plugins: { tailwindcss: {}, autoprefixer: {}, }, } ）。

3.引入样式

// main.ts
import "tailwindcss/tailwind.css"

或者

//./src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

4.修改配置tailwind.config.js文件

content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}']

非React 或 Vue 这样的 JavaScript 框架使用

1.创建完tailwind.config.js配置文件

2.注入 Tailwind

新建一个 CSS 文件，如下的 ./your-css-folder/styles.css

然后使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

3.tailwind.config.js修改

content: ['./src/**/*.{html,js}']

4.修改 package.json

"build": "tailwindcss -i ./src/style.css -o ./dist/tailwind.css --watch"

参考：官方文档

v4版本

v4 是一次大更新，和之前版本完全不同了，具体请看这里教程

• js配置文件 tailwind.config.js不是必须的了（默认不起作用）
• 有了vite专属插件不在依赖 postcss 了（v3 对PostCSS强依赖，工具链复杂度大）
• 定义主题方式发生变化
• 基于 Rust 的 Oxc 编译器，v3 快几十倍