vite+vue3使用tailwindcss

vite+vue3使用

1.通过 npm 安装 Tailwind

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2.创建您的配置文件

npx tailwindcss init

这将会在您的工程根目录创建一个最小的 tailwind.config.js 文件。

3.引入样式

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

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

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

5.vite.config.ts增加配置

css: {
    postcss: {
        plugins: [require('tailwindcss'), require('autoprefixer')],
    },
},

非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"