Developers January 18, 2021

Migrating from Bootstrap 4 to Tailwind

ConradL

Hi!

When you start working on a project, you should just use what you already know. There is enough problems that you don't need to pile up some more.

However, when I started building my current software (1 year ago) I chose to learn a new database system (a graph database model).
That was the best decision I could have made. I love it. It's awesome.

Now I simply regret I didn't take the time to understand the differences between Bootstrap 4 and Tailwind during the same period.

And I just reached my "haha" moment about this subject. I finally understand why I hear about Tailwind everywhere.
It's a paradigm shift...

From https://tailwindcss.com/docs/utility-first :

Now I know what you're thinking, "this is an atrocity, what a horrible mess!" and you're right, it's kind of ugly. In fact it's just about impossible to think this is a good idea the first time you see it — you have to actually try it.

But once you've actually built something this way, you'll quickly notice some really important benefits:

  • You aren't wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that's really just a flex container.
  • Your CSS stops growing. Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.
  • Making changes feels safer. CSS is global and you never know what you're breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking.

When you realize how productive you can be working exclusively in HTML with predefined utility classes, working any other way will feel like torture.

Lesson is... if everyone talks about something, it may not be just a fad; it may be a new paradigm shift.

I'm now trying this new way of working on my future landing page and on a side project, before migrating my app at some point in the near future :)

Keep on learning!

  1. 3

    I have been using Bootstrap for a year or so now. I haven't looked into much of the Tailwind code or anything (although I do somewhat follow the creators, Adam and Steve)

    But what is the big difference between the two? Since I know Bootstrap has lots of utility classes too. I also has ssome pre defined colorized elements too. Other than the added color/styles elements, what the difference?

    1. 1

      You may have a point: I never learned to look at Bootstrap in this way.
      They may have most of what Tailwind covers, but when I see classes such as "hover:dark:bg-black" of Tailwind, I can't think of any equivalent in Bootstrap. Maybe there is though!

      If I take a look at my code base right now, most of it was made using the utilities from Bootstrap. I use mostly:

      • Grid system: row, cols (with responsive breakpoints), alignments
      • Components: btn, alert, modal, forms, ...
      • Margins and paddings
      • Text utils

      But when I look at my CSS files, I believe most of what I did there could have been avoided if I was accustomed to Tailwind. I believe being a "utility-first" framework, it makes you think first in term of classes, and then use custom CSS as a last resort only.

      I think I believe this increases maintainability.
      I must admit I'm bad at organizing my CSS files, and I'm afraid to break something when I touch it.

      Anyway, I'll try Tailwind in the next few days and see how I feel about it.

      1. 2

        I used Tailwind for 1.5 years then I converted back to Bootstrap again for many reasons:

        • Yes, the code becomes ugly and you'll think it's not a problem but it is.
        • Using CSS alongside Tailwind is considered a bad practice.
        • I don't like the idea of putting CSS in JS.

        Take your time and master CSS and how to write a clean CSS code. I consider it the best investment I did as a full stack developer.

  2. 2

    What's the database model you speak of? Why's it good?

    1. 1

      Neo4J and the Cypher query language.
      I don't have a clue to why it's not more popular.

      It's awesome because these things:

      • Relationships between objects are explicit and natural.
      • You still have indexes for collections but their structure is not fixed.
      • Once you have a starting point in the graph, you're just left with the subtree to explore.
      • The underlying model fits exactly what you would draw on a board: nodes and relationships. It makes designing and visualization very natural.

      I'm really happy about it!

  3. 1

    I tried to use tailwind, but ultimately I sticked with Bootstrap. My biggest turnoff regarding tailwing: missing the javascript functionality that comes out-of-the-box with bootstrap: dropdowns, popovers, tooltips, modals. They are pretty important for every project, and you basically need to reinvent these wheels when using tailwind.

  4. 1

    Tailwind is a mess. Making a mess of so so many css-classes.

    As a developer I want dev-helpers things to save time and save thinking so I can concentrate on the business logic of my app or service. And bootstrap has done it now almost 10 year beautifully!

  5. 1

    I've used various versions of bootstrap and bulma then one day stumbled upon tailwind and have been using it since pre-v 1 version and have no regrets. It takes time to get used to it and develop a new workflow.

  6. 1

    So help me out. I’ve actively tried to use tailwind a few times now. I just can’t get over the learning curve; I’ve been using bootstrap since 2013 and I’m very quick with it. Don’t even need to think.

    Here’s the thing, you make a custom button style and this may utilise like 9 tailwind classes. Every time you put a button on your site you need to change those 9 classes everywhere they appear in your code.

    How is that better than creating a button class?

    If I create a button class then I make one change and the potentially dozens / hundreds of buttons I have on my site all change at the same time.

    1. 3

      Two solutions to your problem:

      1. If you have a button that's reused, it should be a component. In Rails, use a partial. In React/Vue/Angular/Svelte, it would be a component you'd just import. Then you only have one place to change.
      2. You can also you @apply and just use it like you would in traditional CSS: https://tailwindcss.com/docs/functions-and-directives#apply
    2. 1

      Why would you not make your button class if you use Tailwind?

      Do you feel like Tailwind prevents you from doing that?

      1. 2

        Well maybe a button was a bad example but in general. Its rare that when you style something it's one time use.

        Maybe Bootstrap makes me feel that way because it's not as granular as tailwind. EG... a button again, i can just use the classes .btn and .btn-color and I hve a button.

        In tailwind I believe you'd need to use classes for padding, text color, background color and also all the hover attributes. These are basically taken care of in bootstrap simply by the .btn class.

        However I get that its each to their own. I;m not dissing tailwind (as I saidm ive tried to get into it multiple times), my level of fluency with bootstrap is just too high i guess (to suffer the learning curve).

        1. 1

          Ah yes. Obviously use what you're most fluent in.

          Not saying that you feel this way, but I get a sense that a lot of people think like Tailwind is anti-Bootstrap or even anti-semantic classes. Repeated code should always be subject to wrapping into a single class or component. Tailwind even has a documentation topic about different ways to extract repeated stuff (link).

          I think a major pain-point is that there's no "standard library" of components in Tailwind. Evidence of this is all the Tailwind libraries popping up all over the place.

Recommended Posts