If Tailwind doesn't provide the utility class to do something, what's the recommended way to solve this? For example, adding a background image or add styles to a :before or :after pseudo element. Should you add a custom class?
That's where in my opinion these CSS frameworks fall short. They promise that styles are in 1 place (your HTML), but if you have to build a highly custom pixel-perfect responsive design you have to violate the principles they are based on.
Personally, tailwind has opacity-25, opacity-50, opacity-75, but in this case I really wanted opacity-90. Usually when I'm confronted with cases like that I mostly just add that to my custom css.
The tailwind way of thinking is really useful.
The point of Tailwind is to give you 95% of what you'll need via utility classes, so you can spend your time actually writing CSS for those small cases where tailwind doesn't cover exceptions. You can absolutely add custom CSS on top of tailwind to achieve the final 5%.
When you write a custom class, do you use a single custom class and use @apply to apply all the tailwind styles? Or do you only write the custom styles and keep the other classes?
And what's the naming convention for these custom classes?
If I'm building a "component" class that uses a bunch of utilities, then yes, I use the @apply directive that tailwind provides.
However, for custom stuff like linear-gradients and clip paths, I write regular old css inside these classes.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.