Vue3 + Vite 项目引入 postcss + tailwindcss

一、PostCSS

1. 简介

PostCSS 是一个强大的 CSS 处理工具，它本身是一个工具库，但其核心功能是通过插件扩展，来对 CSS 进行编译、转换和优化。它适用于现代 CSS 开发，提供更灵活、高效的方式来处理样式表。

2. 主要作用

增强 CSS 功能：

使用插件来扩展 CSS 的功能，比如支持嵌套规则、变量、循环、条件语句等功能。
自动添加兼容性前缀：

借助 autoprefixer 插件，自动为 CSS 添加适配不同浏览器的前缀，避免手动添加。
编译下一代 CSS 语法：

使用 postcss-preset-env 插件，支持未来 CSS 的草案语法，并将其转换为当前浏览器支持的代码。
代码优化：

压缩 CSS 文件、移除未使用的 CSS 规则，减少文件大小，提高加载性能。
模块化 CSS 开发：

通过 postcss-import 插件支持文件的拆分与导入，实现模块化管理。
集成生态系统：

可以作为 Webpack、Vite 等构建工具的 CSS 处理工具，与前端生态无缝结合。

4. 常搭配插件

PostCSS 本身是一个 CSS 解析器，所有功能都通过插件实现，插件可以扩展和修改 CSS 的解析和生成过程。

autoprefixer

自动添加浏览器前缀，兼容不同浏览器。
postcss-import

支持 @import 导入 CSS 文件。
tailwindcss

Tailwind CSS 是一个功能类优先的 CSS 框架（utility-first CSS framework），用于快速构建现代网页的用户界面。与传统的组件式 CSS 框架（如 Bootstrap）不同，Tailwind 提供了一组低级的工具类，让开发者可以直接在 HTML 中组合使用这些类，快速实现所需的样式，而无需编写自定义 CSS。
将 Tailwind CSS 作为 PostCSS 插件安装是将其与构建工具（如 webpack、Rollup、Vite 和 Parcel）集成的最无缝方式。
postcss-pxtorem

将 px 转换为 rem

5. 安装相关包

npm install postcss postcss-import autoprefixer tailwindcss postcss-pxtorem -D

6. 初始化配置文件

postcss.config.cjs

// postcss.config.cjs
module.exports = {
  plugins: [
    'postcss-import': {},
    'tailwindcss/nesting': {},
    'tailwindcss': {},
    'autoprefixer': {},
    'postcss-pxtorem': {
      rootValue: 16, // 基准值（1rem = 16px）
      exclude: /node_modules/i // 要忽略并保留为 px 的文件路径
    },
  ]
}

tailwind.config.cjs

// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],  // 添加所有模板文件的路径
  theme: {
    extend: {
      colors: {
        // 文本
        'bt-text-primary': '#3B5CFF',
        'bt-text-danger': '#F53F3F',
        'bt-text-mormal': '#030229',
      },
    },
    screens: {
      xs: { max: '768px' },
      sm: { min: '768px' },
      md: { min: '1280px' },
      lg: { min: '1440px' },
      xl: { min: '1900px' }
    }
  }, // 自定义扩展
  plugins: [
    {'postcss-pxtorem': {
        rootValue: 16, // (Number | Function) 表示根元素字体大小或根据input参数返回根元素字体大小
        unitPrecision: 5, // （数字）允许 REM 单位增长到的十进制数字
        propList: ['*'], // 可以从 px 更改为 rem 的属性 使用通配符*启用所有属性
        selectorBlackList: [],// （数组）要忽略并保留为 px 的选择器。
        replace: true, // 替换包含 rems 的规则，而不是添加回退。
        minPixelValue: 0, // 最小的转化单位
        exclude: /node_modules/i // 要忽略并保留为 px 的文件路径
      }
    },
  ] // 插件配置
}

tailwind.css
全局引入样式文件

// tailwind.css
/** 将每个 Tailwind 层的 @tailwind 指令添加到你的主 CSS 文件中 */
@tailwind base;
@tailwind components;
@tailwind utilities;

7. 集成 vscode 编辑器

Visual Studio Code 的官方 Tailwind CSS IntelliSense 插件通过为用户提供自动补齐、语法高亮和代码检查等高级功能来增强 Tailwind 开发体验。有如下功能：

自动补齐。类名智能建议，CSS 函数和指令。
代码检查。高亮 CSS 和标记中的错误和潜在错误。
悬停预览。将鼠标悬停在 Tailwind 类名称上可查看完整的 CSS。
语法高亮。提供语法定义，以便正确高亮 Tailwind 功能。

8. 插件版本

"autoprefixer": "^10.4.20",
"postcss": "^8.4.24",
"postcss-import": "^15.1.0",
"postcss-pxtorem": "^6.1.0",
"prettier": "^3.3.3",
"sass": "^1.63.6",
"tailwindcss": "^3.3.2",
"typescript": "^4.9.5",