由于最新官網(wǎng)的方案沒效果。

1.安裝tailwindcss

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

2.創(chuàng)建tailwindcss的配置文件

npx tailwindcss init

這將會(huì)在您的項(xiàng)目根目錄創(chuàng)建一個(gè)最小化的 tailwind.config.js 文件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {}
  },
  plugins: []
}

3.在入口中引入tailwind

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

4.配置tailwind.config.js文件

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

在 tailwind.config.js 文件中，配置 content 選項(xiàng)指定所有的 pages 和 components ，使得 Tailwind 可以在生產(chǎn)構(gòu)建中，對(duì)未使用的樣式進(jìn)行tree-shaking。

5.配置vite.config選項(xiàng)

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

使用postcss的tailwindcss和autoprefixer插件對(duì)，css進(jìn)行處理