2021-07-31 在vue3中使用tailwindcss

安装

代码语言：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
# ...

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

postcss css 单片机 http

0 人点赞