NextJs - Tailwind css 类样式未应用于响应式屏幕

Question

我正在尝试在 div 上添加一个自定义类，该类应该仅应用于“md”屏幕。不起作用-

<div className="md:myclass"/>

tailwind-config.ts

theme: {
    screens:{
      'sm': {
        'min' : '320px',
        'max' : '767px'
      },
      'md': {
        'min': '768px',
        'max': '1023px'
      },
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px'
    },
}
}

globals.css // 导入到我的布局中

.myClass{
 background: yellow;
}

我有点怀疑，所以只是为了检查 :md 是否工作，我添加了 "md:hidden" 并且它确实隐藏了它。

<div className="md:hidden"/>

还检查了类是否正确导入，我尝试直接添加类没有md：并发现它正在工作

<div className="myclass"/>

有没有其他方法可以添加我自己的响应式设计类，或者我是否遗漏了一些东西..

Answer 1

您必须将自定义类添加到 globals.css 文件中定义的 tailwind 层之一中。您可以在 tailwind docs

中阅读更多相关信息

/* globals.css */

@layer components {
  .myclass {
    background: yellow;
  }
}