.css | TailwindCSS 笔记
💡
原文中文，约5300字，阅读约需13分钟。
📝
内容提要
本文介绍了 TailwindCSS 的 utility-first 设计思路和使用方法，包括样式重用、响应式设计、夜间模式、自定义样式等功能，以及在 Next.js 项目中的安装和使用。
🎯
关键要点
- TailwindCSS 的设计思路是 utility-first，预先定义样式组合，使用时通过多个类名来应用样式。
- 传统 CSS 设计需要为每个元素定义类，导致样式耦合和不灵活。
- TailwindCSS 的优点包括简化类名命名、减小 CSS 文件大小和便于视觉效果修改。
- TailwindCSS 批评传统方法难以统一风格和处理响应式设计。
- TailwindCSS 支持状态样式，如鼠标悬浮和聚焦，可以通过伪类实现。
- 支持响应式设计，使用前缀如 md: 和 lg: 来定义不同屏幕尺寸的样式。
- 夜间模式可以根据操作系统设置或手动配置，需在 tailwind.config.js 中设置。
- 可以通过 @apply 和 @layer 自定义样式，避免过度抽象。
- 在 Next.js 项目中安装 TailwindCSS 需要使用 npm 命令，并配置相关文件。
- 在全局样式表中引入 TailwindCSS，并在项目组件中使用其类。
➡️
