Aliases for tailwind classes?

Question

I want to change the name of the tailwind hidden class so that whenever I want to use display:none, I can do so by using the word no-display instead of using the word hidden. I am assuming this is a change I can make in the tailwind config file but I can't seem to figure out exactly how and what changes need to be made in that file. Thanks for the help

Answer 1

You can add custom utilities to your tailwind CSS file.

---

With the @apply directive:

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

---

With CSS utility:

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