我们看一下官网对 Tailwind CSS 的定义：

“只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。本 CSS 框架本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。”

Tailwind CSS 的工作原理

Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。

安装（官方提供了多种场景下的安装方法，只详细举例其中的一种）

• 将 Tailwind CSS 安装为 PostCSS 插件是将其与 webpack、Rollup、Vite 和 Parcel 等构建工具集成的最无缝方式。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

配置

tailwind.config.js init的时候自动创建

/** @type {import('tailwindcss').Config} */
export default {
  content: [
  // 入口文件
  './index.html',
  // 根据自己需求增加文件路径、类型
  './src/**/*.{vue,ts}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

创建 tailwind.css，并在项目中引用此文件，如：在main.js中引入

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

postcss.config.js

/** @type {import('postcss').Config} */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

vite.config.js
必须在vite plugin中引入，否则会报模块化引入的问题

/** @type {import('vite').UserConfig} */
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        tailwindcss,
        autoprefixer,
      ]
    }
  }
})

遇到与组件库冲突的问题

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  ...
  corePlugins: {
    // 禁止 tailwind 的默认样式(官方叫法：禁用预检)
    // 也可以先引入 tailwindcss，后引入组件库的样式（覆盖）
    preflight: false
  }
}

至此，我们的项目中已加好了tailwindcss了，然后就可以在开发中使用它们了