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>

出现效果就大功告成了

相关推荐
该用户已不存在18 小时前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方18 小时前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
小猫由里香18 小时前
小程序打开文件(文件流、地址链接)封装
前端
Tzarevich18 小时前
使用n8n工作流自动化生成每日科技新闻速览:告别信息过载,拥抱智能阅读
前端
掘金一周18 小时前
一个前端工程师的年度作品:从零开发媲美商业级应用的后台管理系统 | 掘金一周 10.23
前端·人工智能·后端
大杯咖啡18 小时前
前端常见的6种设计模式
前端·javascript
zyfts18 小时前
手把手教学用nodejs读写飞书在线表格
前端
泉城老铁19 小时前
vue实现前端excel的导出
前端·vue.js
用户516816614584119 小时前
Lottie动画在前端web、vue、react中使用详解
前端·vue.js
咖啡の猫19 小时前
Vue收集表单数据
前端·javascript·vue.js