2021-07-31 在vue3中使用tailwindcss

无道 2021-07-31 1 条评论前端相关阅读2169 手机阅读

安装

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest

npx tailwindcss init -p

vue-cli

新增配置：

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

一旦提示：Error: PostCSS plugin tailwindcss requires PostCSS 8.

就要使用postcss 7

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

vite

因为vite自带css预处理器，只需安装响应处理器模块就行：

yarn add sass -D
yarn add less -D
# ...

然后安装上面的“安装”步骤就行。

全文完 [

有帮助?打赏

支付宝打赏

微信打赏

]

标签： vite vue-cli tailwindcss

修改： 2021-07-31 11:08

版权

非特殊说明，本博所有文章均为博主原创。如若转载，请注明出处：https://misiyu.cn/article/181.html

上一篇： 2021-07-28 Windows安装MinGW备份

下一篇： 2021-08-06 Caddy的下载与使用

他人评论

暑期快乐，感谢博主的分享，支持了。技术文章，学习了。 80% WordPress博客，都是在讲前端开发

马内 @Ta [#203] 2021-07-31 11:26:15

评论已加载完毕啦~

我要评论

昵称

邮箱

主页

验证码

评论内容

It's me

昵称：无道

坐标：成都

性别：

一个人，一介学生社会人，一个儿子~ 愿你我都被世界温暖以待