1、安装tailwindcss

“tailwindcss”: “^3.4.3”

npm i tailwindcss@3.4.3

2、package.json的scripts配置

新建两个css文件tailwindInput.css、tailwindOutput.css，注意路径是否正确

"useTailwindCss": "npx tailwindcss -i ./xxx/tailwindInput.css -o ./xxx/tailwindOutput.css --watch",

3.tailwindInput.css

@tailwind base;
@tailwind components;
@tailwind utilities;

项目根目录新建tailwind.config.js

npx tailwindcss init

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: [
  	// 需要使用tailwindcss的文件
    './src/views/**/*.{vue,js}',
  ],
  theme: {
    backgroundColor: {
      // 全局主题背景色，元素class属性使用class="bg-themeColor"
      // themeColor: "#D72828",
    },
    colors: {
      // 全局主题色，元素class属性使用class="text-themeColor"
      // themeColor: "#D72828",
    },
    extend: {},
  },
  plugins: [],
}

3、项目全局引入tailwindOutput.css

4、运行项目的同时，启动useTailwindCss

npm run useTailwindCss

tailwindcss在Vue3、vite失效解决

点击解决vite项目tailwindcss不生效！！