vue2.x, vue cli 3.x接入tailwindcss实战

原创已于 2025-09-01 17:47:14 修改 · 438 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css #tailwindcss

于 2025-09-01 17:42:38 首次发布

tailwindcss实在太吸引我了！

集成参考：

tailwindcss官网说明

经历了九九八十一难，总结出的最终方案

首先交代项目背景，抛开项目实况说方案都是耍流氓！

项目背景：vue 2.x, vue cli 3.x

最终方案：PostCSS 7 compatibility build

集成流程

1.PostCSS 7 compatibility build

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

备注：

如果命令行无法执行，提示比如zsh: no matches found: postcss@^7，你需要针对你的命令行去修改语法细节

以下是适用zsh命令行的解决方案（把@进行转义）：

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss\@\^7 autoprefixer\@\^9

2.初始化配置文件tailwind.config.js 和postcss.config.js

npx tailwindcss init -p

其中postcss.config.js的内容

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

tailwind.config.js的内容

module.exports = {
  corePlugins: {
    preflight: false // 禁用全局样式重置
  },
  content: ['./public/**/*.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: []
}

3.导入tailwindcss

创建样式文件，我是放置在src/assets 文件夹下

/* tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

在项目主入口比如main.js 中引入该文件

import '@/assets/tailwind.css'

4.特别注意（血泪史）

如果你项目中还另外使用了其他css处理器比如less，那么需要在配置文件中显示声明postcss插件配置（此时测试postcss.config.js删除没有影响，但我还是保留了），且放置顺序一定要在其他处理器的后面！

至此你可以愉快的使用tailwindcss了，非常好！

 <div class="bg-blue-500 text-white p-4 rounded-lg">
  测试Tailwind样式
</div>

成功的效果：

番外篇：

插件

vscode插件添加Tailwind CSS IntelliSense

使用教程

官网、菜鸟教程