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

发布于02月22日

我正在try 添加一个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"/>个

我还判断了类是否正确导入，我try 直接添加类without md:，发现它正在工作

<div className="myclass"/>个

有没有其他方法可以为响应式设计添加我自己的类，或者我遗漏了什么.

Css相关问答推荐

当滚动到页脚时，是否可以隐藏固定元素？

在ReactJS中使用动画在栅格上添加柱

我应该在哪里放置expo /Reaction本地项目的CSS重置文件？

输入中的框始终显示在MUI文本字段中

Next.js 条件样式

没有字母间距的CSS悬停边框

TypeScript 中有效的 CSS 属性名称数组，但带有连字符

没有 colored颜色 Select 器的 JavaFX colored颜色 Select 器

CSS 媒体查询不为桌面版的圣杯响应式布局包装 Flexbox 容器元素

老虎机插槽上的 CSS 对齐问题

React Typescript 中的自动 typewriter 效果

如何使半圆的边框淡出？

使用 CSS 在悬停时转换 SVG 路径的填充属性

透明的空心或切出的圆圈

在 CSS3 中重新启动动画：比删除元素更好的方法吗？

如何在 Chrome 的判断器中添加/插入之前或之后的伪元素？

名称-值对的语义和 struct

打印html时在页面上打印页码

如何应用 CSS 分页符来打印包含大量行的表格？

带有一些 LESS 魔法的花式媒体查询

实用课程推荐

推荐答案

Css相关问答推荐