vite+vue3使用tailwindcss

1.通过 npm 安装 Tailwind

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

2.创建您的配置文件

npx tailwindcss init

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

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

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 框架使用：

创建完tailwind.config.js配置文件后 新建一个 CSS 文件，使用 @tailwind 指令注入 Tailwind 的基础 (base)，组件 (components) 和功能 (utilities) 样式：

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

tailwind.config.js修改：

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

 

生成package.json文件

npm init -y

 

package.json增加内容：

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