I am currently developing an internal CSS 'framework' / methodology that falls somewhere in between ITCSS and Tailwind.
We heavily rely on utility classes, but sometimes the length of the actual class name becomes too much and we feel the need to break it out into its own class.
For instance:
<button class="p-2 bg-primary elevate-1">Click Me</button
Here's what I want to achieve:
.btn {
@extend .p-2;
@extend .bg-primary;
@extend .elevate-1;
}
I am aware that @extend is not recommended so I prefer not to use that method.
Is there a webpack plugin available that allows the use of @extend without any issues?
Alternatively, does anyone know how Adam Wathan implemented the @apply directive: https://tailwindcss.com/docs/extracting-components/#extracting-utility-patterns-with-apply
Referencing the documentation, he demonstrates this:
.btn-blue {
@apply bg-blue text-white font-bold py-2 px-4 rounded;
}
Could this be a SASS function he created? If so, any guidance on how to develop something similar?
Thank you.