Feature: dynamic class adding with @apply directive (similar to compose of css module)

I’ve been thinking about this feature for a while now, but with tailwind this can’t work. But maybe with windicss?

Sometimes it is cleaner to use the @apply directive. For example, to shorten the line length or to refer the same styling in a component without duplicating the same classes. My disadvantage with @apply is, that it generates a whole new class with the styling that is usually already there. In larger projects this will end up in a larger css file than if only the pure tailwind classes were used. But what would be, if @apply didn’t generate a new class but an array of classes that the object needs and add them dynamically? Similar to the compose method of css modules

I think this is an incredible improvement!

Here is an example of what my idea might look like: This is the Code I am writing:

<div class="btn" /> 
<style>
  .btn {
    @apply w-4 h-4 bg-blue-500;
  }
</style>

and this is what the compiled code looks like:

<div class="w-4 h-4 bg-blue-500" />

[ahku]

This is a great idea, but the example syntax would not work as .btn might be used by other styles eyes due to the implicit nature of css.

Would it be possible to borrow the css modules syntax, ie create a component-scoped helper:

<template>
  <button :class="$style.button" />
</template>

<style module>
  .button {
    @apply text-red-500;
  }
</style>

Otherwise, it might be easier to just do some string concatenation.

[mgutz]

great minds think alike 😃 Thank you for this wonderful utility!