在vue2中使用tailwindcss（完整教程）

前端蜗牛君

已于 2024-05-20 10:57:05 修改

阅读量5.6k

点赞数 20

CC 4.0 BY-SA版权

分类专栏：前端工具文章标签： tailwindcss vue2 webpack

于 2024-03-08 21:06:53 首次发布

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

本文链接：https://blog.youkuaiyun.com/zqd_java/article/details/136568490

在这里插入图片描述

如果你看过好多教程之后，还是报错，无法使用tailwindcss，我希望本教程可以让你成功上岸。

环境要求

node：>=v14.17.0

安装tailwindcss

由于最新的tailwind css使用post css 8版本，vue2框架暂时还不支持，所以需要指定安装postcss7的版本

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

安装之后检查版本：

"dependencies": {
   
   
    "@tailwindcss/postcss7-compat": "^2.2.17"
},
"devDependencies": {
   
   
    "autoprefixer": "^9.1.0",
    "css-loader": "^0.28.8",
    "postcss": "^7.0.39",
    "postcss-loader": "^3.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  },

创建tailwindcss文件

在 assets 文件夹下创建 tailwindcss.css文件

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

在入口文件main.js中引入

import '@/assets/tailwindcss.css'

创建tailwindcss的配置文件

最低0.47元/天解锁文章

200万优质内容无限畅学