7 ms·

Tailwindo: Convert Your Bootstrap CSS to Tailwind CSS

72 points by wilsonfiifi 5y ago

iamgopal 5y ago
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.
Tade0 5y ago
Anytime I see Tailwind mentioned I can't help but think about this: https://mobile.twitter.com/samthor/status/1402825668061130755 https://mobile.twitter.com/samthor/status/140282566806113075...
- dgb23 5y ago
  If we’re trying to be serious: this is a bit like comparing strings to enums/sum types or sets. The point of atomic/utility CSS is to have a well defined and composable subset of rules. I suggest you seriously try it. I was surprised after a short while. It’s a very productive approach.
  - wwweston 5y ago
    I can see this potentially working out well if the "atoms" are roughly at the level of design system elements (for example, maybe something like Tachyons). At the level of class-per-CSS-property it just makes no sense to me. CSS properties are a well-defined and composable set of rules too.
    - aidos 5y ago
      It’s actually more fine grained than that, which is what makes it work. You can add responsive variations and hover styles all in the same place. It’s effectively inline styles on steroids. And actually, today for the first time in ages and ended up having to add “real css” to style an input[range] and it was so weird and disjointed to me to not define it right where I needed it.
  - Tade0 5y ago
    I've tried it and the amount of visual clutter it introduces is matched only by inline CSS.
    - zffr 5y ago
      Using Tailwind doesn't mean you need to individually list each class every time. You can use PostCSS to define class that compose multiple tailwind classes together (See how @apply is used here: https://tailwindcss.com/docs/using-with-preprocessors https://tailwindcss.com/docs/using-with-preprocessors). My flow is usually to iterate by adding individual classes directly to HTML elements, and when I see a pattern emerge I'll sometimes make a new class with that inherits from multiple tailwind classes.
ivrrimum 5y ago
I am just finding out about TailWind. Other than dark mode, bootstrap has all of those things and some.
psadri 5y ago
I’m a fan of tailwind. But I do wonder if inlining classes into each and every element is as efficient as CSS rules that apply to those same elements. Imagine you have a table with a few hundred cells. You can have something like: .my_table .cell { ... } Or repeat those classes in each cell. Is there a performance, memory etc impact?
- imilk 5y ago
  You can group Tailwind classes into parent classes using @apply and everything works as you'd expect
  - ehutch79 5y ago
    Adam Wathan even says this is a code smell, and is just for the myriad of corner cases. If all your classes are in an apply, why not just use the CSS? most of the utility classes are one line classes
    - city41 5y ago
      I feel like one of the best benefits of Tailwind is often overlooked. It's essentially a design system in a box. A simple and general one (which makes sense), but a system none the less. All of the classes being related to each other, ie in `p-1` and `m-1`, the 1 means the same value (0.25 rem). But also the fact that the sizing system exists and is pragmatic is very useful. Tailwind sites often feel more consistent and they just "feel" better because Adam and his team took the time to design a well considered sizing system. The same holds true of colors, shadows, font size, etc. And even better, if you work at a place where a custom design system is needed, Tailwind has pretty much everything you need to customize your own but still give the same Tailwind productivity to developers.
      - galuggus 5y ago
        Yes. I use tailwind because it's the easiest way to get something responsive working very quickly. I'm not a designer but stuff made with tailwind always looks presentable and clean. With vanilla CSS I'm constantly forgetting media queries and fail to have consistent margins and padding. Tailwind is great!
cjlm 5y ago
Might as well migrate to universal.css[0] while you're at it [0] https://github.com/marmelab/universal.css https://github.com/marmelab/universal.css
- AbuAssar 5y ago
  This is a joke.
e12e 5y ago
This sounds like a terrible idea. I like it. Any more examples of what the transform(s) look like? Ie. Given some input, this is the output?
aaronbrethorst 5y ago
I was a Tailwind skeptic too, but pairing it with a tool for building 'componentized' user interfaces (like GitHub's ViewComponent gem for Ruby web apps[1]) makes it incredibly easy to build attractive, consistent, easy-to-change UIs. [1] https://github.com/github/view_component/ https://github.com/github/view_component/ and https://viewcomponent.org https://viewcomponent.org

72 points by wilsonfiifi 5y ago

iamgopal 5y ago

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.

Tade0 5y ago

Anytime I see Tailwind mentioned I can't help but think about this: https://mobile.twitter.com/samthor/status/1402825668061130755 https://mobile.twitter.com/samthor/status/140282566806113075...

dgb23 5y ago
If we’re trying to be serious: this is a bit like comparing strings to enums/sum types or sets. The point of atomic/utility CSS is to have a well defined and composable subset of rules. I suggest you seriously try it. I was surprised after a short while. It’s a very productive approach.
- wwweston 5y ago
  I can see this potentially working out well if the "atoms" are roughly at the level of design system elements (for example, maybe something like Tachyons). At the level of class-per-CSS-property it just makes no sense to me. CSS properties are a well-defined and composable set of rules too.
  - aidos 5y ago
    It’s actually more fine grained than that, which is what makes it work. You can add responsive variations and hover styles all in the same place. It’s effectively inline styles on steroids. And actually, today for the first time in ages and ended up having to add “real css” to style an input[range] and it was so weird and disjointed to me to not define it right where I needed it.
- Tade0 5y ago
  I've tried it and the amount of visual clutter it introduces is matched only by inline CSS.
  - zffr 5y ago
    Using Tailwind doesn't mean you need to individually list each class every time. You can use PostCSS to define class that compose multiple tailwind classes together (See how @apply is used here: https://tailwindcss.com/docs/using-with-preprocessors https://tailwindcss.com/docs/using-with-preprocessors). My flow is usually to iterate by adding individual classes directly to HTML elements, and when I see a pattern emerge I'll sometimes make a new class with that inherits from multiple tailwind classes.

ivrrimum 5y ago

I am just finding out about TailWind. Other than dark mode, bootstrap has all of those things and some.

psadri 5y ago

I’m a fan of tailwind. But I do wonder if inlining classes into each and every element is as efficient as CSS rules that apply to those same elements. Imagine you have a table with a few hundred cells. You can have something like: .my_table .cell { ... } Or repeat those classes in each cell. Is there a performance, memory etc impact?

imilk 5y ago
You can group Tailwind classes into parent classes using @apply and everything works as you'd expect
- ehutch79 5y ago
  Adam Wathan even says this is a code smell, and is just for the myriad of corner cases. If all your classes are in an apply, why not just use the CSS? most of the utility classes are one line classes
  - city41 5y ago
    I feel like one of the best benefits of Tailwind is often overlooked. It's essentially a design system in a box. A simple and general one (which makes sense), but a system none the less. All of the classes being related to each other, ie in `p-1` and `m-1`, the 1 means the same value (0.25 rem). But also the fact that the sizing system exists and is pragmatic is very useful. Tailwind sites often feel more consistent and they just "feel" better because Adam and his team took the time to design a well considered sizing system. The same holds true of colors, shadows, font size, etc. And even better, if you work at a place where a custom design system is needed, Tailwind has pretty much everything you need to customize your own but still give the same Tailwind productivity to developers.
    - galuggus 5y ago
      Yes. I use tailwind because it's the easiest way to get something responsive working very quickly. I'm not a designer but stuff made with tailwind always looks presentable and clean. With vanilla CSS I'm constantly forgetting media queries and fail to have consistent margins and padding. Tailwind is great!

cjlm 5y ago

Might as well migrate to universal.css[0] while you're at it [0] https://github.com/marmelab/universal.css https://github.com/marmelab/universal.css

AbuAssar 5y ago
This is a joke.

e12e 5y ago

This sounds like a terrible idea. I like it. Any more examples of what the transform(s) look like? Ie. Given some input, this is the output?

aaronbrethorst 5y ago

I was a Tailwind skeptic too, but pairing it with a tool for building 'componentized' user interfaces (like GitHub's ViewComponent gem for Ruby web apps[1]) makes it incredibly easy to build attractive, consistent, easy-to-change UIs. [1] https://github.com/github/view_component/ https://github.com/github/view_component/ and https://viewcomponent.org https://viewcomponent.org