vue-cli 安装tailwind

最新推荐文章于 2024-08-30 08:44:12 发布

雨客cs

最新推荐文章于 2024-08-30 08:44:12 发布

阅读量1.6k

点赞数

分类专栏： css 文章标签： vue.js 前端 npm

本文链接：https://blog.csdn.net/weixin_43540589/article/details/122238395

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

可行版本（2021.12.30）：
“vue”: “^3.2.23”,
“@vue/cli”: “4.5.15”, (2021.12.30最新的)
“sass”:"^1.42.1", (若使用less的项目，请到官方找到vue/cli对应支持的less与less-loader)
“sass-loader”:"^8.0.2" (版本太高可能会报错),
“autoprefixer”: “^9”,
“postcss”:"^7",
“tailwindcss”: “npm:@tailwindcss/postcss7-compat”,

前言，

旧项目使用electron+vue/cli，想要添加tailwindcss框架，本以为像vite一样，vue/cli也能非常方便导入tailwindcss，但是后来发现vue/cli不支持tailwind3，后面安装为tailwind2并成功了，由于tailwind和vue/cli的官网都没有对此的教程，特此记录，以供参考。

首先，我们下载tailwindcss（尝试下载最新版）

# Using npm 
npm install tailwindcss -D （2021.12.31：最新版为^3.0.8）
# Using Yarn 
yarn add tailwindcss -D

在你的全局样式表文件中（例index.scss）引入tailwindcss

// @import "tailwindcss/base"; 
// tailwindcss/base库只是一些基础样式库，类似normalize.css，如果项目有其他基础样式库，可能造成冲突，可以忽略掉
@import "tailwindcss/components";
@import "tailwindcss/utilities"

接下来设置配置文件回到命令行界面输入回车

npx tailwind init

init 之后在项目根目录会生成tailwind.config.js，大概长这样

module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

在vue.config.js中设置

module.exports = {     
  css: {       
    loaderOptions: {         
      postcss: {           
        plugins: [require('tailwindcss'), require('autoprefixer')]         
      }       
    }   
  } 
}

,或者创建一个postcss.config.js(ts)

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

重新运行项目

命令行会报错，发现@vue/cli 4.5并不支持tailwind3+和autoprefixer10所依赖的postcss8，如果你能升级@vue/cli 4.5的postcss到8可以试试。

Syntax Error: Error: PostCSS plugin tailwindcss requires PostCSS 8.

重新下载一个版本

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