如何在Tailwind CSS中正确创建自定义响应式间距类？

问题原因 #

你之前的配置方式有误：Tailwind CSS的spacing主题对象不支持嵌套的响应式断点键（sm/md/lg/xl），这种写法只会生成类似mb-custom-sm的静态类，而非自动响应屏幕尺寸的mb-custom类。

解决方案：使用Tailwind插件生成自定义响应式类 #

通过Tailwind的插件API，你可以直接定义单个类在不同断点下的样式，完美实现你要的mb-custom/py-custom效果。

完整配置示例

修改你的tailwind.config.js文件如下：

module.exports = {
  theme: {
    extend: {},
  },
  // margin的responsive变体默认已启用，可省略
  variants: {},
  plugins: [
    function({ addUtilities, theme }) {
      // 定义mb-custom的响应式样式
      const customMarginBottom = {
        '.mb-custom': {
          marginBottom: theme('spacing.2'), // 小屏（默认，<640px）对应mb-2
        },
        '@screen sm': {
          '.mb-custom': {
            marginBottom: theme('spacing.4'), // 中屏（≥640px）对应mb-4
          },
        },
        '@screen md': {
          '.mb-custom': {
            marginBottom: theme('spacing.6'), // 大屏（≥768px）对应mb-6
          },
        },
        '@screen lg': {
          '.mb-custom': {
            marginBottom: theme('spacing.8'), // 超大屏（≥1024px）对应mb-8
          },
        },
      };

      // 同理定义py-custom的响应式样式
      const customPaddingY = {
        '.py-custom': {
          paddingTop: theme('spacing.2'),
          paddingBottom: theme('spacing.2'),
        },
        '@screen sm': {
          '.py-custom': {
            paddingTop: theme('spacing.4'),
            paddingBottom: theme('spacing.4'),
          },
        },
        '@screen md': {
          '.py-custom': {
            paddingTop: theme('spacing.6'),
            paddingBottom: theme('spacing.6'),
          },
        },
        '@screen lg': {
          '.py-custom': {
            paddingTop: theme('spacing.8'),
            paddingBottom: theme('spacing.8'),
          },
        },
      };

      // 添加自定义工具类
      addUtilities(customMarginBottom, ['responsive']);
      addUtilities(customPaddingY, ['responsive']);
    }
  ],
}

使用方法 #

直接在HTML元素上添加对应的类名即可：

<!-- 自动适配不同屏幕尺寸的底部外边距 -->
<div class="mb-custom">示例内容</div>

<!-- 自动适配不同屏幕尺寸的上下内边距 -->
<div class="py-custom">示例内容</div>

补充说明 #

• 如果你需要调整某断点的间距值，只需修改对应@screen块中的theme('spacing.x')值，比如把xl断点的mb-custom改成theme('spacing.10')即可。
• 这种方式完全遵循Tailwind的移动优先原则，默认样式应用于最小屏幕，断点样式会覆盖更小屏幕的设置。

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