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",
原文地址：https://blog.csdn.net/qq_20765533/article/details/143919828
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！