在 vue-cli 中使用 tailwindcss

[maomao1996]

在 vue-cli 中使用 tailwindcss

Tailwind CSS 是一个高度可定制的基础层 CSS 框架，提供一系列的基础工具类，通过工具类的组合完成样式编写

说明

tailwindcss 从 2.0 开始使用了 PostCSS 8，但是 vue-cli 自带的为 PostCSS 7，从而需要安装 tailwindcss的兼容版本

安装

1. 安装依赖

yarn add tailwindcss@npm:@tailwindcss/postcss7-compat
# OR
npm install tailwindcss@npm:@tailwindcss/postcss7-compat

# 同时 autoprefixer 的版本必须是 `9.x`

2. 创建 tailwind.css

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

3. 在 main.js 引入 tailwind.css

4. 根目录创建 postcss.config.js

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

修改 tailwind 配置项

根目录创建 tailwind.config.js 文件

module.exports = {
  theme: {},
  variants: {},
  plugins: []
}

配置项说明

编辑器插件

Visual Studio Code - Tailwind CSS IntelliSense

1. 语法提示
2. 代码高亮
3. Linting

解决 @apply 语法错误

将 @apply 改为单行列出，多次调用

stackoverflow
@apply 语法文档

post-css-7-compatibility-build