Only include @layer components only when actually used in html

[ellyx-csg]

I have scenario when i need to create custom style to help the team creating html page quicker and less error prune and keep them consistent. Unfortunately, creating headless javascript components doesn't cover all of our scenarios and we go down to this part.
In our case we created a custom class like this

@layer components {
  .btn {
    @apply bg-primary-500 text-white border border-primary-600;
  }
}

we found the .btn is always included in the css final result even when we are not using it in the html file. We tried using @utility directive but having hard time when trying to override the style with existing utility classes from Tailwind.

Is it possible to make @layer components to behave like the @utility directive? or is there other options to achieve similar outcome to only include .btn when actually used in the html?

[wongjn]

@utility approach should work fine. The btn utility would have several properties. This means that it would be sorted before most other single-property utilities in the CSS, enabling overridding. See this Tailwind Play where all properties from btn are overridden by built-in utility class names.

[ellyx-csg]

hi @wongjn thank you for your helpful answer. That is working for simple selector like button above. I have utility with complex selector like below:

@utility has-error {
  &,
  & .help-block {
    @apply text-red-500;
  }
}

@utility help-block {
    @apply block mt-2 mb-2 text-gray-500;
}

and the html

<div class="mb-2 has-error">
    <label>Name</label>
    <input type="text" class="border border-gray-200 block rounded-sm w-full">
    <p class="help-block text-blue-400">test helper block</p>
  </div>

https://play.tailwindcss.com/FKfjjoir94

the help block text is still red. What would be your suggestion in this scenario?

Thank you.

[wongjn]

Here is my suggestion: https://play.tailwindcss.com/1mRP2i1aDB