First look at Tailwind CSS
Today I was creating a test project with Laravel, Inertia and VueJS. The default installation also includes Tailwind CSS.
I heard and read about Tailwind before but never used it. So this was a great time to start working with it. But I was a little shocked. I can't imagine that this is the way to go forward.
Laravel's example Welcome page has two buttons. Both with the following class attribute: `class="ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"` How is this maintainable when there are a lot of buttons on your website that share all these classes!? I can already hear the big sigh of the front-end department when the customer decides they don't want rounded buttons after all. Why not just use `class="button"` with some CSS that will apply to all buttons sharing this class? Or maybe even better: if the HTML element is a button, why not just style buttons in CSS?
Yes, of course Tailwind is great for quickly styling HTML elements if you don't know how to use CSS. But now you are hardcoding things that should be configurable.
Another problem is that you need to make sure all buttons in your website use the same list of classes. And if you decide to add one to a button you need to add them everywhere. Well, maybe we can introduce a variable for that: `buttonClasses = "ml-4 font-semibold text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500"` and then use that variable in the class attribute: `:class="buttonClasses"`. You see where this is going...
Tailwind might give you a quick start but when the wind turns it will push you back.