tailwindcss
提示
2025 年 1 月 22 日 发布了，tailwindcss 4.0。开始使用 Tailwind CSS， 😄 升级指南
我们选择 vite
如果您正在使用 Vite，我们建议从 PostCSS 插件迁移到我们新的专用 Vite 插件，以提高性能并获得最佳开发人员体验。
备注
postcss 配置我们就可以删除了。[查看 postcss 文档]。
非常赞的优化
使用 vite 不要添加到以.global.css，或者 module.css 文件中，他们返回是模块，这是不被引入的。
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";
整体上优化写法，捆绑大小，性能提升都非常好，值得学习和使用。
旧的配置，待删除
安装
npm install -D tailwindcss@3
npx tailwindcss init
配置 tailwind.config.js
// 配置和自定义 Tailwind 安装的指南。 https://v3.tailwindcss.com/docs/configuration
export default {
// 配置内容源（扫描文件）
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,mdx}"],
// + 前缀（防止命名冲突，配置后写法也要改，实际不需要，因为css hash 化）
prefix: "",
// + 可自定义的预设配置
presets: [],
theme: {
extend: {},
},
plugins: [],
};
配置 postcss
module.exports = {
modules: true,
plugins: {
// + https://tailwindcss.com/docs/using-with-preprocessors
tailwindcss: {},
autoprefixer: {
grid: true,
},
},
};
添加 css
@tailwind base;
@tailwind components;
@tailwind utilities;