4 ms·

So how does that work exactly? For instance now I have class some-button to make the button blue. Next week I‘m told make them yellow. It’s a change in one cl

• K0nserv 2y ago
  You use components, e.g. react, and replace the `bg-blue-500` class with `bg-yellow-500` in your button component.
  • moron4hire 2y ago
    HTML already has a button component. How is this better than creating a root CSS style for buttons using CSS variables to abstract the colors?
    • K0nserv 2y ago
      For this contrived example it isn't better. I was very sceptical of tailwind before I tried it, but in certain scenarios it's nice. I think it shines if you are already using a component focused development process. As others have said you don't need to come up with class names for every thing you want to style. Rather than cross-reference between js/html files and css files everything (structure, style, and interactivity) is in one place. You also don't need to care about specificity. Personally I think it gets a bit mad when you start wanting to do :hover, :active and media queries, but you can still use classes (using the @apply directive) for that if you wish.
    • Scarblac 2y ago
      The root style is global to one app, the component may be used in many different apps.
      • moron4hire 2y ago
        But you can use CSS rules to override variable values for more specific selections. So you can define a global --primary-button-color at the root, apply it to every button, then override --primary-button-color in, say, `tool-container`.
  • croes 2y ago
    So tailwind needs to be used with some kind of library or framework and not vanilla HTML and JS?
    • K0nserv 2y ago
      It's possible to use with vanilla, but probably not a good experience. You want either components or at least a templating system where you can break things down into reusable parts. It's somewhat similar to raw HTML vs something like PHP, you can have thousand of HTML files, but if you wanna change something common (say the header) it's not fun with thousands of individual files. Lastly you can combine Tailwind with regular css classes .btn-primary { @apply bg-blue-500 px-2 py-1; } but at that point I'm not sure how much you are gaining by using Tailwind
  • immibis 2y ago
    So that's exactly the same as using the CSS style directly. The way you've described it, Tailwind provides no benefit whatsoever.
• halflife 2y ago
  It’s less about replacing blue with yellow, which means overhauling design. My example was when your style system includes several color spectrums - primary, secondary, accent, grey, dark, light. Your components are styled using these spectrums - button.color-primary-500.bg-grey-300 When you want to change the colors globally it’s extremely simple. Same with paddings and margins.