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"