Vue3 + Vite 项目引入 postcss + tailwindcss

一、PostCSS

1. 简介

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

2. 主要作用

1. 增强 CSS 功能：

   使用插件来扩展 CSS 的功能，比如支持嵌套规则、变量、循环、条件语句等功能。

2. 自动添加兼容性前缀：

   借助 autoprefixer 插件，自动为 CSS 添加适配不同浏览器的前缀，避免手动添加。

3. 编译下一代 CSS 语法：

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

4. 代码优化：

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

5. 模块化 CSS 开发：

   通过 postcss-import 插件支持文件的拆分与导入，实现模块化管理。

6. 集成生态系统：

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

4. 常搭配插件

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

1. autoprefixer

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

2. postcss-import

   支持 @import 导入 CSS 文件。

3. tailwindcss

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

4. postcss-pxtorem

   将 px 转换为 rem

5. 安装相关包

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

6. 初始化配置文件

1. postcss.config.cjs

// postcss.config.cjs
module.exports = {
   
  plugins: [
    'postcss-import': {
   },
    'tailwi