vue3引入tailwindcss 4.1

Sokach3862025-08-21 17:00

前言

废话不多说，先上项目版本：

js 复制代码

{
 "vite": "^6.0.1"，
 "vue": "^3.5.13",
 "sass": "^1.90.0"
 }

待安装的包版本

js 复制代码

 "devDependencies": {
    "@tailwindcss/postcss": "^4.1.12",
    "@vitejs/plugin-vue": "^5.2.1",
    "autoprefixer": "^10.4.21",
    "postcss": "^8.5.6",
    "tailwindcss": "^4.1.12",
  }

安装

安装所需的包

js 复制代码

npm install -D tailwindcss postcss autoprefixer @tailwindcss/postcss

初始化配置

csharp 复制代码

npx tailwindcss init -p

如果跟我一样这步无法成功的，那就只能在项目根目录下手动创建postcss.config.js 和tailwind.config.js（与vue.config.js同级）

配置

postcss.config.js

js 复制代码

export default  {
    plugins: {
        '@tailwindcss/postcss': {},
        autoprefixer: {},
    },
};

tailwind.config.js

js 复制代码

// tailwind.config.js
export default {
    content: ['./index.html', './src/**/*.{vue,js,scss}'],
    theme: {
        extend: {},
    },
    plugins: [],
};

vue.config.js

js 复制代码

  plugins: [vue()],
  css: {
      postcss: "./postcss.config.js",//重点
    },
    //...省略无关代码...

styles.scss (根据实际项目情况)

引入 "tailwindcss"

js 复制代码

@use "tailwindcss";

main.js 将刚才的styles.scss导入main.js

js 复制代码

import './style.scss'

测试

js 复制代码

    <h1 class="text-2xl font-bold text-red-500 bg-blue-100 p-4">
      如果这是红色文字和蓝色背景，说明 Tailwind 工作了！
    </h1>

出现效果就大功告成了