如何查看所有Tailwind类对应的纯CSS代码？

关键步骤 #

• 导出完整Tailwind CSS规则
  在你的Tailwind项目中，确保入口样式文件包含以下核心指令：

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

  然后通过Tailwind CLI执行构建命令，生成包含所有Tailwind类规则的CSS文件：

  npx tailwindcss -i ./src/input.css -o ./dist/full-tailwind.css
  

  生成的full-tailwind.css会包含所有Tailwind工具类、基础样式以及你自定义的Tailwind组件类对应的纯CSS代码。

• 合并自定义样式
  将你现有的自定义样式表内容，复制到刚生成的full-tailwind.css文件中，让所有需要转换的类规则集中在同一个样式文件内。

• 工具转换内联CSS
  使用你找到的支持外部样式表转内联的工具，上传合并后的样式文件，即可同时将自定义类和Tailwind类转换为内联CSS。

优化技巧 #

• 若只需转换项目中实际用到的Tailwind类，可通过Tailwind的content配置指定项目的HTML/JS文件，生成精简版CSS以减少体积：

  npx tailwindcss -i ./src/input.css -o ./dist/trimmed-tailwind.css --content "./src/**/*.{html,js}"
  

  再将精简后的CSS与自定义样式合并后进行转换。

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