The same for me. That is exactly why I like new CSS features in combination with PostCSS - it makes writing everything much easier and I do not need to care much about compatibility, as tooling takes care about it for me. All of that while I still write “good-old-plain” CSS.
You can do it like:
:root {
--shadow-md: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.btn {
box-shadow: --shadow-md;
}
Still IMHO much cleaner than just @apply shadow-md as it doesn’t tell me what kind of shadow it is, and unless I will know other TailwindCSS module names I have no way to know just by looking at the code what kind of shadow it will be (whether text or box shadow). And CSS variables are supported in all browsers nowadays, so that mean, that I can have some “semantic” classes and then in subcomponents control everything just via them. IMHO super useful while keeping classes in HTML semantically meaningful and in CSS keeping the information what value changes which property.
