NextJs中Tailwind自定义类在md响应式场景下不生效问题

Tailwind的响应式前缀（如md:）是框架专属机制，仅对Tailwind原生工具类生效，不会自动为你在全局CSS中定义的自定义类（.myClass）生成响应式变体。你写的md:myclass不属于Tailwind识别的类，因此不会触发对应的媒体查询样式，自然无效。而md:hidden是Tailwind内置类，myclass是全局样式类，所以二者都能正常工作。

方法1：用Tailwind @screen指令编写响应式自定义类 #

在你的globals.css中，通过@screen指令绑定媒体查询，直接定义仅在md断点生效的类：

/* 仅在md及以上屏幕生效 */
@screen md {
  .myClass {
    background: yellow;
  }
}

之后在HTML中直接使用：

<div className="myClass"/>

如果需要保留基础类+响应式变体，也可以这样写：

.myClass {
  /* 基础样式（可选） */
}

@screen md {
  .md-myClass {
    background: yellow;
  }
}

使用时：

<div className="md-myClass"/>

方法2：将自定义类注册为Tailwind工具类 #

在tailwind-config.ts中，把你的自定义样式注册为Tailwind的工具类，这样框架会自动生成响应式变体：

export default {
  // 其他配置...
  theme: {
    extend: {
      utilities: {
        '.myclass': {
          'background-color': 'yellow',
        },
      },
    },
  },
}

注册完成后，你就可以正常使用md:myclass了，Tailwind会自动生成对应的媒体查询样式。

方法3：使用Tailwind任意值语法（快速应急） #

如果不想修改配置或全局CSS，可以用Tailwind的任意值语法直接在className中编写响应式自定义样式：

<div className="md:[background:yellow]"/>

这种方式无需额外配置，适合快速实现简单的响应式自定义样式。

内容的提问来源于stack exchange，提问作者S.Nishant