Vue 项目使用 tailwindcss

使用 npm 或者 yarn 下载 tailwindcss

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

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

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

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

npx tailwind init

init 之后 在项目根目录会生成tailwind.config.js和postcss.config.js 在vue.config.js中设置

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

重新运行项目 命令行会报错

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

重新下载一个版本

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

推荐 VS Code 插件

Tailwind CSS IntelliSense