Tailwind中@layer指令的作用及适用场景是什么？

一、只用@apply 会不会影响性能？ #

会有潜在的性能问题。如果单纯用@apply定义自定义样式类，这些类会无条件保留在最终编译的CSS文件中，哪怕你整个项目里一次都没用到它。而Tailwind的核心优势就是按需编译，未使用的原生工具类会被Tree Shaking剔除，但纯@apply定义的类不在这个机制覆盖范围内——定义的无用类越多，最终CSS体积就越大，会拖慢页面加载速度。

二、@layer 能带来什么实际益处？ #

• 按需编译，精简CSS体积：把自定义样式放到@layer（比如@layer components、@layer utilities）中后，Tailwind会将其纳入自身的Tree Shaking体系。只有当你在代码中实际引用了这个自定义类时，它才会被保留在最终输出的CSS里，彻底避免冗余代码。
• 自动适配样式优先级：Tailwind的base、components、utilities层级有固定的优先级（比如utilities优先级高于components）。用@layer指定类别后，自定义样式会自动继承对应层级的优先级，不用手动加!important来解决样式冲突问题。
• 无缝兼容Tailwind特性：自定义样式可以直接使用Tailwind的响应式前缀（md:、lg:）、深色模式前缀（dark:）等特性，不用自己写复杂的媒体查询或嵌套规则。比如在@layer components里定义的按钮类，直接写md:custom-btn就能实现大屏下的适配样式。

三、@layer 的适用场景 #

• 通用组件样式复用：比如项目里反复用到的自定义按钮、卡片、导航栏样式，放到@layer components中，既保证按需加载，又能让组件样式的优先级低于原生工具类（方便用工具类临时调整局部样式）。
• 扩展原生工具类：如果需要自定义通用工具类（比如自定义的文字截断、渐变背景类），放到@layer utilities里，它的优先级会和Tailwind原生工具类一致，能轻松覆盖其他层级的样式。
• 需要Tailwind特性加持的自定义样式：只要你的自定义样式需要用到响应式、深色模式、悬停/焦点状态等Tailwind原生支持的特性，用@layer能让你直接用前缀语法实现，不用手写额外CSS。
• 不确定使用范围的自定义类：如果你不确定某个自定义类会不会在全局被用到，放进@layer就不用担心它变成冗余代码——用则保留，不用则被剔除。

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