How to use tailwind 3's @apply

Support
1

@apply is used for abstracting out styling.

You have a primary blue button and it will be repeated on many pages.

If you decide to change the shade of blue to a lighter blue, you’ll have to track down every single button.

If you have classes that are reused often then abstracting it out has many benefits:

  • It prevents you from having to track down where you added that specific style. Because now you’ll be able to change it in just one place.
  • You can use regular CSS classes, and even CSS variables if wanted.

I’m using the tailwind 3 CDN.

In the DOM Header Insertions. I’ve declared my custom class button-pri

<style type="text/tailwindcss">

    .button-pri {
            @apply px-8 py-2 bg-sky-400 hover:bg-sky-500 
            text-black font-medium text-sm  rounded-md;
    }

</style>

Problems you will run into

  • Invisible buttons - tailwind 3 has added a transparent class to buttons. Using these @apply classes solves this.
  • Naming - if one of your class names clash with any tailwind or bootstrap class names, it breaks the style of your entire page.
  • Typo’s - one wrong char it will break all styling.
  • Important - These classes used in the @apply are more important than the ones declared inline. You can solve that by adding a ! . Examples !bg-red-500 or hover:!bg-red-500

Page Schema - button snippet

{
    "actions": [],
    "buttonClasses": "button-pri hover:!bg-red-500",
    "styleClasses": "",
    "text": "Push Me",
    "type": "button"
}