前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2021-07-31 在vue3中使用tailwindcss

2021-07-31 在vue3中使用tailwindcss

作者头像
无道
发布2021-08-03 15:13:36
1.4K0
发布2021-08-03 15:13:36
举报
文章被收录于专栏:无道编程无道编程

安装

代码语言:javascript
复制
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
代码语言:javascript
复制
npx tailwindcss init -p

vue-cli

新增配置:

代码语言:javascript
复制
//vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [require('tailwindcss'), require('autoprefixer')],
      },
    },
  },
};

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

就要使用postcss 7

代码语言:javascript
复制
yarn remove tailwindcss postcss autoprefixer
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

vite

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

代码语言:javascript
复制
yarn add sass -D
yarn add less -D
# ...

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-07-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装
  • vue-cli
  • vite
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档