AI 摘要：本文为 Tailwind CSS 的 @apply 功能辩护，认为其价值被严重低估。作者通过对比 Sass 的 @include 机制，展示了 @apply 在代码复用、响应式设计和可维护性上的优势，并提供了实用案例（如布局工具类）证明其灵活性，同时指出其虽不如 Sass 混入强大，但结合现代 CSS

1. 作者对 Tailwind 的矛盾态度
• 肯定 Tailwind 方法论在样式可维护性和性能上的优势，但批评原生 Tailwind 的某些设计。
• 强调 @apply 是被低估的核心功能，尽管 Tailwind 创始人 Adam Wathan 曾建议避免使用。

2. @apply 的功能解析
• 允许将 Tailwind 工具类复制到自定义 CSS 中，类似 Sass 的 @include。
• 示例对比单属性工具类（如 p-4）与复杂工具类的应用场景。

3. 与 Sass 混入的对比
• 优势 ：
• 直接用于 HTML 无需额外选择器（如 <div class="utility">）。
• 支持响应式变体（如 md:utility）。
• 劣势 ：
• 不支持多变量或逻辑控制（如 Sass 的 @if/@for）。

4. 实用案例展示
• 布局工具类 ：定义 vertical 和 horizontal 工具类，通过 flex-direction 快速切换布局，并支持响应式（如 sm:horizontal）。
• 网格系统 ：grid-simple 工具类结合 CSS 变量（--cols）动态调整列数，减少重复代码。

5. 灵活使用建议
• 混合 @apply 与原生 CSS 编写复杂布局（如媒体查询内应用工具类）。
• 提倡将 Tailwind 视为工具而非教条，平衡实用性与可读性。

CSS-Tricks

Tailwind's @apply Feature is Better Than it Sounds | CSS-Tricks

Most of the time, people showcase Tailwind's @apply feature with one of Tailwind's single-property utilities (which changes a single CSS declaration). When showcased this way, @apply doesn't sound promising at all. So obviously, nobody wants to use it. Personally…