4 ms·
I'm looking at the example: https://tailwindcss.com/docs/utility-first https://tailwindcss.com/docs/utility-first So, if I'm making a theme, and I want a diffe
by bbmario 7y ago
I'm looking at the example: https://tailwindcss.com/docs/utility-first https://tailwindcss.com/docs/utility-first
So, if I'm making a theme, and I want a different color for the text, I have to replace "text-gray-900" with my hex code for purple?
Also, what if my theme is about making the design more compact, or increasing density? How do I customize thousands of elements with different combinations of class="ml-6 pt-1"?
Oh, and don't get me started on "bg-white rounded-lg". God forbid your theme wants squared boxes on black background.
- jasim 7y agoDon't use `text-gray` if you're building an app that needs to be themed like that. Instead use `text-secondary` or a similar name that you'd otherwise use in a themeable system. Tailwind lets you define _every_ single design token in the system and comes with zero opinions there. If you want to change density of the design, you can change the spacings centrally in the configuration itself. But if you need a non-proportional change, then it isn't any different than BEM+SASS environment where you'd have to go into every CSS class and make the change. I think it is even better than BEM here because you only need to change classnames in HTML, which is co-located with the style, and it doesn't cause cascading changes due to specificity etc. To me the opinions you hold seem to come from not having tried it in good faith, which was how I used to judge functional CSS as well. If the current CSS style you use serves you well, that's fine you don't have to explore. But if you've wondered whether there is something wrong with the way we do CSS today, then Tailwind could be an eye-opener.