vue3引入tailwindcss 4.1

前言

废话不多说,先上项目版本:

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",
  }

安装

  1. 安装所需的包
js 复制代码
npm install -D tailwindcss postcss autoprefixer @tailwindcss/postcss
  1. 初始化配置
csharp 复制代码
npx tailwindcss init -p

如果跟我一样这步无法成功的,那就只能在项目根目录下手动创建postcss.config.jstailwind.config.js(与vue.config.js同级)

  1. 配置

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>

出现效果就大功告成了

相关推荐
鱼樱前端13 分钟前
uni-app快速入门章法(一)
前端·uni-app
zhangxuyu111833 分钟前
flex布局学习记录
前端·css·学习
掘金一周40 分钟前
🍏让前端去做 iPhone 的液态玻璃❓ | 掘金一周 10.2
前端·人工智能·后端
Keepreal4961 小时前
谈谈对javascript原型链的理解以及原型链的作用
前端·javascript
itslife1 小时前
vite 源码 - 配置
前端·javascript
Keepreal4961 小时前
Typescript中type和interface的区别
前端·typescript
RJiazhen1 小时前
从迁移至 Rsbuild 说起,前端为什么要工程化
前端·架构·前端工程化
小红1 小时前
网络通信核心协议详解:从ARP到TCP三次握手与四次挥手
前端·神经网络
影子信息2 小时前
uniapp 日历组件 uni-datetime-picker
前端·uni-app