当前位置：首页 > article >正文

Vue3 + Vite 项目引入 postcss + tailwindcss

article 2024/11/24 18:52:22

一、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",