Vite+PostCSS+Autoprefixer环境下如何查找Tailwind CSS基础样式文件或完成构建

你项目中自行创建的全局CSS入口文件（通常放在src/style.css或src/index.css路径）就是可以实时生效修改的Tailwind基础样式承载文件，首先确保该文件内已经添加了Tailwind的三层核心指令：

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

• 要修改全局默认基础样式（比如默认字号、页面默认边距、标签默认样式），直接在@tailwind base下方编写@layer base规则即可，修改后启动Vite开发服务就能实时预览效果
• 要新增自定义通用组件类，在@tailwind components下方编写@layer components规则
• 要新增自定义工具类，在@tailwind utilities下方编写@layer utilities规则

你当前使用的Vite+PostCSS+Autoprefixer组合就是Tailwind官方推荐的标准构建方案，完整运行逻辑如下：

1. 开发阶段：Vite调用PostCSS加载Tailwind插件，自动扫描项目内所有html、jsx、tsx、vue等模板文件中用到的Tailwind类名，按需把对应样式注入到全局CSS入口文件，同时Autoprefixer会自动为样式添加浏览器兼容前缀，实现实时热更新
2. 生产打包阶段：执行npm run build（或你项目配置的对应构建命令）时，Tailwind会自动执行Tree Shaking，剔除所有未被使用的样式，最终输出的CSS会被自动压缩，体积极小可直接部署

• 如果你需要单独导出完整/自定义的Tailwind CSS文件，也可以直接执行npx tailwindcss build -i 入口CSS路径 -o 输出CSS路径命令手动完成构建。

内容的提问来源于stack exchange，提问作者Muazzim