4 ms·

Is tailwind the new de-facto standard what bootstrap was three or four years ago ?

by iamgopal 5y ago

sumnole 5y ago
No, but it offers the most flexibility of any css framework I've seen.
- postalrat 5y ago
  If you are after flexibility I'd suggest no css framework. Maximum flexibility.
duxup 5y ago
Not that I've seen. It's the 'hot topic that gets eyeballs and talk' but that doesn't reflect the same level of general usage. A little like Vue got all the articles for a while, and don't get me wrong it's very nice, but adoption generally isn't as high as you might think based on discussion and blogs and etc.
nexuist 5y ago
I've learned that Tailwind is not really a framework so much as it is a philosophy. Most Tailwind classes are just single property wrappers. For example, "flex" is just "display: flex", "bg-dark-400" is just "background: $bg-dark-400", "text-white" is just "color: white"...that sort of thing. It is more of a rebuke of the CSS concept as a whole, as CSS is geared towards large but few classes, and Tailwind is smaller but many classes. You can use Tailwind to build Bootstrap, like the OP link shows, but you can't do the opposite. I was surprised when browsing the Tailwind docs that they didn't have prebuilt navbar, form, or input classes, but now I realize that's actually the point. You have to build all of those yourself to fit the needs of your project. That's not to say that prebuilt components don't exist at all, just that they're not part of the Tailwind framework project - they exist under Tailwind UI, the commercial offshoot of Tailwind. It's pretty expensive as an indie developer, but I don't mind having to build my own components so it still works out for me. [1] https://tailwindui.com/ https://tailwindui.com/
- austingulati 5y ago
  I bought Tailwind UI has a mostly backend developer and I couldn't be more happier with it so far. It really saved a lot of my time in building my MVP, well worth the cost. Although, I guess I don't know for sure until I start to test the product. But the development at least has been a blast.
  - adflux 5y ago
    Same here. Worth it.
  - developer2 5y ago
    I'd be willing to pay, but it's not clear what is included. For an initial look before paying, I downloaded a pirated copy. It only contains the components' html (and alpine, react, vue) snippets, with no extra documentation. If I were to pay for a license, would I get access to log into an account that has a full component browser with examples and extended documentation? If so, can all of that be downloaded as an offline copy, so that it will still be available to me if/when the Tailwind UI product/site is discontinued? Losing access to that important piece of the product would be unacceptable; I suppose I could curl a mirror of the authenticated portal if necessary. The "simplest" button apparently contains the following ridiculous number of css classes, which is not the kind of css composition I'm a fan of. It may be the most flexible in terms of customization, but it's a nightmare to mentally parse and maintain. I would not want to manage a code base where nearly every html tag looks like this. :/ <button type="button" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> Button text </button>
- ehnto 5y ago
  If we're being a little reductive, it's an optimized way to do inline styles for component based architectures, because it turns out inline-styles are actually a pretty good way to style re-usable components. I think that's the major practical difference that might prompt such a philosophy change. In the more traditional method, you would style a <button> element in a CSS file and never think about it again, while it inevitably becomes part of the CSS nest. If you wanted to use tailwind for a normal non-component based site you'd have to individually style every single button again and again, as there's no cascading and no globally applied styles. I wouldn't use tailwind in that cirucmstance. But because it's more likely you're using vue/react and your buttons are actually defined as a <Button> component that you re-use, you can write the styles directly on the component where it's used, co-locating the code and making maintenance a bit easier in the process.
ipaddr 5y ago
No, bootstrap, material, bulma are more popular and would be considered more standard. I don't think a css framework that charges 200, 400 or 800 (team pricing) for the standard ui components will ever reach that status.
- deergomoo 5y ago
  Tailwind UI is a separate thing, and goes far beyond what you’d get with Bootstrap or Bulma. Tailwind by itself is intended for people who don’t want the pre-made components you get with Bootstrap etc.
  - mgkimsal 5y ago
    Does it go 'far beyond' what you get with something like Vuetify or BootstrapVue? (I've seen they offer react/vue binding/components now).
    - deergomoo 5y ago
      Personally I think so yes. The available components [0] feel much more designed, like more thought has been put into them, though obviously that's a subjective factor. [0] https://tailwindui.com/#components https://tailwindui.com/#components
  - ipaddr 5y ago
    Opening sourcing tailwinds framework is great. But without the ui components it reduces the appeal to people who can and want to manually build components and needs a guardrail.

Is tailwind the new de-facto standard what bootstrap was three or four years ago ?

sumnole 5y ago

No, but it offers the most flexibility of any css framework I've seen.

postalrat 5y ago
If you are after flexibility I'd suggest no css framework. Maximum flexibility.

duxup 5y ago

Not that I've seen. It's the 'hot topic that gets eyeballs and talk' but that doesn't reflect the same level of general usage. A little like Vue got all the articles for a while, and don't get me wrong it's very nice, but adoption generally isn't as high as you might think based on discussion and blogs and etc.

nexuist 5y ago

I've learned that Tailwind is not really a framework so much as it is a philosophy. Most Tailwind classes are just single property wrappers. For example, "flex" is just "display: flex", "bg-dark-400" is just "background: $bg-dark-400", "text-white" is just "color: white"...that sort of thing. It is more of a rebuke of the CSS concept as a whole, as CSS is geared towards large but few classes, and Tailwind is smaller but many classes. You can use Tailwind to build Bootstrap, like the OP link shows, but you can't do the opposite. I was surprised when browsing the Tailwind docs that they didn't have prebuilt navbar, form, or input classes, but now I realize that's actually the point. You have to build all of those yourself to fit the needs of your project. That's not to say that prebuilt components don't exist at all, just that they're not part of the Tailwind framework project - they exist under Tailwind UI, the commercial offshoot of Tailwind. It's pretty expensive as an indie developer, but I don't mind having to build my own components so it still works out for me. [1] https://tailwindui.com/ https://tailwindui.com/

austingulati 5y ago
I bought Tailwind UI has a mostly backend developer and I couldn't be more happier with it so far. It really saved a lot of my time in building my MVP, well worth the cost. Although, I guess I don't know for sure until I start to test the product. But the development at least has been a blast.
- adflux 5y ago
  Same here. Worth it.
- developer2 5y ago
  I'd be willing to pay, but it's not clear what is included. For an initial look before paying, I downloaded a pirated copy. It only contains the components' html (and alpine, react, vue) snippets, with no extra documentation. If I were to pay for a license, would I get access to log into an account that has a full component browser with examples and extended documentation? If so, can all of that be downloaded as an offline copy, so that it will still be available to me if/when the Tailwind UI product/site is discontinued? Losing access to that important piece of the product would be unacceptable; I suppose I could curl a mirror of the authenticated portal if necessary. The "simplest" button apparently contains the following ridiculous number of css classes, which is not the kind of css composition I'm a fan of. It may be the most flexible in terms of customization, but it's a nightmare to mentally parse and maintain. I would not want to manage a code base where nearly every html tag looks like this. :/ <button type="button" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> Button text </button>
ehnto 5y ago
If we're being a little reductive, it's an optimized way to do inline styles for component based architectures, because it turns out inline-styles are actually a pretty good way to style re-usable components. I think that's the major practical difference that might prompt such a philosophy change. In the more traditional method, you would style a <button> element in a CSS file and never think about it again, while it inevitably becomes part of the CSS nest. If you wanted to use tailwind for a normal non-component based site you'd have to individually style every single button again and again, as there's no cascading and no globally applied styles. I wouldn't use tailwind in that cirucmstance. But because it's more likely you're using vue/react and your buttons are actually defined as a <Button> component that you re-use, you can write the styles directly on the component where it's used, co-locating the code and making maintenance a bit easier in the process.

ipaddr 5y ago

No, bootstrap, material, bulma are more popular and would be considered more standard. I don't think a css framework that charges 200, 400 or 800 (team pricing) for the standard ui components will ever reach that status.

deergomoo 5y ago
Tailwind UI is a separate thing, and goes far beyond what you’d get with Bootstrap or Bulma. Tailwind by itself is intended for people who don’t want the pre-made components you get with Bootstrap etc.
- mgkimsal 5y ago
  Does it go 'far beyond' what you get with something like Vuetify or BootstrapVue? (I've seen they offer react/vue binding/components now).
  - deergomoo 5y ago
    Personally I think so yes. The available components [0] feel much more designed, like more thought has been put into them, though obviously that's a subjective factor. [0] https://tailwindui.com/#components https://tailwindui.com/#components
- ipaddr 5y ago
  Opening sourcing tailwinds framework is great. But without the ui components it reduces the appeal to people who can and want to manually build components and needs a guardrail.