我想要更改tailwind hidden类的名称,以便每当我想使用display:none时,都可以使用单词no-display而不是单词hidden来实现.我假设这是我可以在tailwind 配置文件中进行的更改,但我似乎不能准确地确定如何以及需要在该文件中进行哪些更改.谢谢你的帮助

推荐答案

你可以add custom utilities到你的tailwind CSS档.


使用@apply指令:

main.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .no-display {
    @apply hidden
  }
}

Html:

<div class="no-display">You can't see this text</div>

Tailwind-play link


使用CSS个实用程序:

main.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .no-display {
    display: none;
  }
}

Html:

<div class="no-display">You can't see this text</div>

Tailwind-play link

Css相关问答推荐

CSS动画与不正确的时间比率

在菜单中最后一项之后排除MUI分隔符

Astro网站在使用Astro Build构建后无法正常工作

当值小于 1 时理解 flex-shrink

背景图像允许溢出输入按钮

当前的 html 标签没有发生两列布局

不同的背景 colored颜色 取决于 URL

如何添加一个类以在开始时触发转换

包含tailwind 中固定纵横比框的内容

用css重复表格边框

zoom 时闪烁的背景滤镜模糊

将 CSS 注入 Shadow 根.然而风格正在受到影响

如何通过单击
  • 激活 HTML 链接?
  • 表格的边框半径没有按预期工作

    禁用输入的 CSS Select 器 type="submit"

    如何强制 div 出现在下方而不是旁边?

    Bootstrap 4 img-circle 类似乎不存在

    如何使用 Bootstrap2 使 div 居中?

    在 CSS 中使用多个 @font-face 规则

    HTML浮动右元素顺序