2021-07-31 在vue3中使用tailwindcss

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

安装

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
# ...

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

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 07月31日 11:08

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

评论已加载完毕啦~
点击刷新/生成验证码