如何在Tailwind中结合媒体查询定义自定义工具类？

嘿，我完全懂你的烦恼！每次写组件都要同时写基础类和变体类，确实有点繁琐。你想要的那种「一个类自动适配不同屏幕」的写法，Tailwind完全支持，而且实现起来很简单～

你提到的直接在自定义工具类里嵌套媒体查询的思路是完全正确的，我们可以把默认样式和不同屏幕下的样式都写在同一个工具类里，这样HTML里只需要引用这一个类就够了。

正确的实现方式 #

首先，在你的自定义CSS文件（比如tailwind.css）里这样写：

@layer utilities {
  .padding-root-inline {
    /* 大屏下的默认样式 */
    padding-inline: theme('padding.root-inline');
    
    /* 小屏幕（xs断点以下）的适配样式 */
    @media (max-width: theme('screens.xs')) {
      padding-inline: calc(theme('padding.root-inline') - 2rem);
    }
  }
}

这样一来，你在HTML里只需要写：

<section class="padding-root-inline"></section>

这个类就会自动在大屏下用默认的内边距，小屏触发媒体查询时自动应用修改后的内边距，再也不用手动加max-sm:padding-root-inline-sm这种变体类了！

进阶优化：用Tailwind的@screen简化媒体查询 #

如果你觉得写原生的@media有点麻烦，还可以用Tailwind提供的@screen指令，它会自动对应你配置文件里的断点，写法更简洁：

@layer utilities {
  .padding-root-inline {
    padding-inline: theme('padding.root-inline');
    
    /* 对应你配置中xs断点的媒体查询 */
    @screen xs {
      padding-inline: calc(theme('padding.root-inline') - 2rem);
    }
    
    /* 再加个大屏的适配示例 */
    @screen md {
      padding-inline: calc(theme('padding.root-inline') + 1rem);
    }
  }
}

注意事项 #

• 确保你在Tailwind配置文件（tailwind.config.js）里已经定义了padding.root-inline和对应的屏幕断点（比如xs），不然theme()函数会找不到对应的值。
• 默认样式一定要放在媒体查询外面，这样才能保证大屏下优先使用默认值，小屏用媒体查询里的样式覆盖。

这样的写法既符合Tailwind的最佳实践，又能大大减少HTML中的类名冗余，完美解决你的痛点！

备注：内容来源于stack exchange，提问作者Sapinder Singh