4 ms·

Configuration. Inline styles are direct style Implementations in your html, tailwind is an abstraction that lets your configure and refactor easily. I can say f

Configuration. Inline styles are direct style Implementations in your html, tailwind is an abstraction that lets your configure and refactor easily. I can say from experience, being in charge of developing a large product that was bought and merged into a larger corporation, using tailwind from the start allowed us a refactor our app’s design within 1 day instead of it being several weeks worth of work. And as a bonus it provides best practices in css scaffolding of a product design (typography, grid, colors)

croes 1y ago
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 class What would be the equivalent in Tailwind?
- K0nserv 1y ago
  You use components, e.g. react, and replace the `bg-blue-500` class with `bg-yellow-500` in your button component.
  - moron4hire 1y 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 1y 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 1y ago
      The root style is global to one app, the component may be used in many different apps.
      - moron4hire 1y 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 1y ago
    So tailwind needs to be used with some kind of library or framework and not vanilla HTML and JS?
    - K0nserv 1y 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 1y 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 1y 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.

croes 1y ago

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 class What would be the equivalent in Tailwind?

K0nserv 1y ago
You use components, e.g. react, and replace the `bg-blue-500` class with `bg-yellow-500` in your button component.
- moron4hire 1y 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 1y 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 1y ago
    The root style is global to one app, the component may be used in many different apps.
    - moron4hire 1y 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 1y ago
  So tailwind needs to be used with some kind of library or framework and not vanilla HTML and JS?
  - K0nserv 1y 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 1y 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 1y 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.