vue-cli 项目添加 tailwind.css

最近在尝试工具类思想设计的 CSS 库 tailwind.css，简单记录一下怎么在 vue-cli 工程中引入 tailwind.css。

1. 安装 tailwind

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

2. 创建 tailwind 配置文件（可选）

如果你希望定制化tailwind.css， 可以试着引入 tailwind 的配置文件

npx tailwindcss init 

这会在你的工程根目录创建一个最小的tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

3. 配置 PostCSS

你需要添加PostCSS 选项来让tailwind.css 跑起来

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

请在你的工程根目录引入如上所示配置，并命名为postcss.config.js

4. 把 tailwind 引入工程

现在可以创建一个 CSS 文件在 src/assets/css/styles.css 并添加

@tailwind base;
@tailwind components;
@tailwind utilities;

接着在 main.js 中导入到 vue 工程中

import '@/assets/css/style.css'

一切顺利的话，你的Vue功能就能使用 tailwind.css 了。以上。