Vue2 集成 Tailwind CSS

当我们的项目还是基于 vue-cli 创建的，这时候是不能直接按照 Tailwind CSS 官网的方式安装依赖。

安装依赖

在终端执行以下命令，安装 tailwindcss 和相关依赖。

pnpm add -D tailwindcss@npm:@tailwindcss/postcss7-compat@^2.2.17 postcss@^7 autoprefixer@^9 @loongwoo/tailwind

生成配置文件

在终端执行以下命令，创建 tailwind.config.js 文件。

pnpx tailwindcss init

修改 tailwind.config.js 文件，配置 content 添加文件路径。

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: ['./src/**/*.{js,vue}']
  },
  theme: {
    extend: {}
  },
  plugins: []
}

添加 PostCSS 配置文件

将 tailwindcss 和 autoprefixer 添加到 postcss.config.js 文件中。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
    // ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
}

添加 Tailwind 指令

在 main.js 文件中，添加 import '@loongwoo/tailwind'。

import '@loongwoo/tailwind'