Tailwind vs bootstrap

Tailwind CSS has recently benefited from an upwards trend of popularity and there is an increasing amount of front-end developers who choose to stick with the new CSS Framework as a new alternative.

In this article I want to explore the differences between Tailwind and Bootstrap and give you as much insight as possible on this topic. The initial release of Bootstrap happened on August 19,nearly 9 years ago. Fun fact is that it was created during a hackathon by the Twitter development team and later it was developed and maintained by Mark Otto, Jacob Thornton and a small group of core developers. Shortly it became one of the most popular CSS Frameworks out there and it currently is the sixth-most-starred project on GitHub and it is currently being used by millions of developers worldwide.

It is described as a utility-first CSS framework and they claim that development is faster with this new method. Having introduced some basic facts about the two frameworks I would like to lay out the comparison benchmarks that we will delve into in this article. We will talk about the development process, the number of components, performance and community. Bootstrap is based on the Object Oriented CSS methodology which has become one of the most popular ways of managing stylesheets and classes.

For example, if you had 10 buttons in your application you would have 10 different classes for those buttons. With Object Oriented CSS you would instead have a lot more classes for the sizing and style of the button. If your primary color is red, in a regular CSS file that same color would be repeated across all declarations.

With Sass, such properties can become variables so if you want to change the color red, you can simply just change it in one place and it will propagate in the whole application. In Tailwind CSS you have classes for almost all kinds of margins, padding, backgrounds, font sizes, font families, text colors, shadows and so on. Let me give you a scenario: what if you wanted to make the button just slightly smaller in a particular page? Would you want to create a whole new sizing class just for that unique case?

Another great feature that I observe is the fact that you can also set hover, active and focus states using classes. May I add that Tailwind also offers the possibility to create classes such as. Instead of Sass, Tailwind CSS uses post-css and a config file to set up the variables and configuration of your stylesheets. You can add, remove or update colors, spacings, fonts, shadows anything that you can think of. In this case I must say that Bootstrap has a clear advantage because of its wide set of components including cards, modals, accordions, nav tabs and so on.

Tailwind CSS has only a handful of components according to their documentation, the full list being:. However, Tailwind CSS does have a lot more utility classes than Bootstrap does and using them you can create any type of component you want. Bootstrap has 4 files that are required to include into your project to get the full benefit of the CSS Framework.

Together they amount up to In comparison, Tailwind CSS only requires the base stylesheet file which amounts up to 27kb. Bootstrap has been around for more than 9 years and being the most popular CSS Framework it has a large community of developers, forums, tools and so on.

You can find countless of Stackoverflow threads answering to just about any question you might have about certain situations. In the case of Tailwind CSS there is still much room to grow in terms of its community, however it is growing day by day and the number of tools and websites related to it are also increasing. In conclusion I believe that deciding whether to choose Tailwind CSS or Bootstrap should be more based on your personal preference regarding writing styles and classes.

There is no clear performance or quality advantage that any of the frameworks might have, except the fact that Bootstrap does still come with a much larger set of components. At the end of the day I recommend you try out Tailwind CSS and see if the utility-first way of building user interfaces for the web is a preferred way for you to work.

tailwind vs bootstrap

What are your preferences and which CSS Framework do you regularly use for your projects?This article is focused on taking a look at Tailwind features. If you would like to skip ahead and jump straight into building things with Tailwind, look at these articles:.

Here's an example of a Bootstrap card vs a Tailwind card component. Warning: This may look very weird and you may dismiss Tailwind after this example.

Give it some more time and a few practice examples and you'll start to see the power of utility classes and the idea of composition over inheritance. While the Bootstrap card is easy to create, it isn't the easiest to customize to our own applications.

tailwind vs bootstrap

You'll need to override this. We are using many utility classes to achieve a card.

While this looks like a little more work upfront, the biggest benefit is that you can customize to your style quickly and easily. Here's the CodePen. Here's a breakdown of the classes for the card:.

Tailwind CSS is an investment. If you want to write your CSS and design your apps faster, you're gonna have to put in the time to learn the classes; this is the same as any technology that you want to benefit from. This can be seen as writing inline styles. There are many strategies to moving these classes out of your HTML and making them reusable. Here are some tactics for cleaning up our Tailwind classes:.

An approach that I personally like is keeping the classes in the template and then finding ways to make that template reusable. React components is a good example of this. We'll talk about that more later. For now, we need to focus on how we can use Tailwind to build things. Now that we've seen a quick example, let's dig deeper.

When most people think of CSS frameworks, they usually think of the most popular one, Bootstrapor any of the very popular ones like Foundation or Bulma. Tailwind is a different type of framework. Instead of pre-built components, Tailwind provides utility classes.

When we talk about utility classes, we mean that we have a multitude of classes that we can use. These will link direclty to the Tailwind docs. The Tailwind docs are very good at helping us find what we need.

You'll find yourself browsing the docs often while you are learning the classes. You may be wondering, "why should we use a utility class framework that will make our HTML seem busier? When using Bootstrap or something similar, we'll have a lot pre-built classes like cardnavbarand more. As soon as we want to customize those things for our own projects, we'll have to write custom CSS and try to override the base styles.

This benefit will be more apparent the more time you spend with the framework. Let's go over some benefits and build a few things. Tailwind on its own is a large CSS framework.April 23, 6 min read Responsive user interfaces have mostly been implemented with libraries like Bootstrap, Foundation, Bulma, or good old-fashioned media queries. We have used these UI kits with ease to implement directives to achieve the exact UI and proper responsiveness we require with less code. But the big question is, have we really been doing it right?

What if there was a way to achieve responsive UI without being bound by the rules of any UI kit? Is there a way to achieve responsiveness and still keep our custom user interface designs? I like to think of it as a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.

CSS Grid or Bootstrap 4 in 2018?

In my opinion, the one thing that most developers will find a bit distracting with Tailwind CSS is the fact that your markup looks a lot busier than you might like. Tailwind is available on npm and can be installed using npm or Yarn. Tailwind is configured almost entirely in plain JavaScript. It is recommended to create a tailwind. The CLI utility helps handle this easily. For more info on setting up, check out the official documentation. Frameworks like Bootstrap have abstracted the creation of components to the point where it compels developers to use only the available patterns provided.

The same goes for other UI kit-type frameworks. Some might argue that overriding the framework with our own CSS is an option, but if we override a lot, then is there really any point in using the framework? Another problem I have found with Bootstrap sites is that they almost always look alike, so this inhibits our ability to incorporate creativity into the dev environment.

This is one of the advantages of Tailwind CSS: its ability to easily build complex user interfaces without encouraging any two sites to look the same. Rather, it gives us utility classes that help us style our component in certain ways and allows us to build our own classes using these utility classes.

See the Pen Box example. From the above example, we can see how easy it is to implement a button component with Tailwind CSS. It might be a bit tricky memorizing all of this at first, but once you have some familiarity with the syntax, you will be alright. The code snippet below has a container that has a shadow for large screens due to the shadow-lg class and a background of white implemented by using bg-white.

We can also notice the px-4 and py-1 classes are just to help with padding in the x- and y-axes for the message button. The default Tailwind configuration comes with Compare this to Bootstrap at The reason for this is simple: Tailwind comes prepacked with a lot of options and styles for users to choose from, and it packs all these variations to reduce the tendency to write your own CSS. Fortunately, Tailwind comes with a few strategies you can use to keep your generated CSS small and performant.

This upgrade feature shortens the build time from s to 8s. It does this by simply comparing the CSS class names available in your template against the class names used and then removing the unused CSS. Tailwind allows you to pick the exact amount of screen sizes you need. Are you ready for this? Are you sure?By using our site, you acknowledge that you have read and understand our Cookie PolicyPrivacy Policyand our Terms of Service.

The dark mode beta is finally here. Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. I have been using bootstrap in my projects but I get the feeling that is not good practice for web developers.

Tailwind CSS: Is it tomorrow’s Bootstrap?

I have some colleagues recommending Tailwind CSS. The answer to the question that you are asking really depends on who you ask. You can achieve good practice for CSS with both frameworks, but it really comes to what you consider as a good practice. You can find various articles on the web telling you about best practices for CSS, such as this.

I encourage you to read more about CSS and the best practices for CSS in general, then you should start to read about both frameworks in depth, and also try both of them on some projects to really decide which one suits you better. But in the end, good practice can be achieved with both, but you need to understand why are you using one of them.

Also, have in mind that they are different paradigms and you should read about it as well Tailwind CSS vs Bootstrap: Learn about the differences. Once you understand all of this, you will be able to tell, which is better for you and the projects that you are working on.

Subscribe to RSS

Learn more. Tailwind CSS or Bootstrap? Which is considered good practice? Ask Question. Asked 1 month ago. Active 1 month ago. Viewed 78 times.Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit. It doesn't have a default theme, and there are no build-in UI components. It comes with a menu of predesigned widgets to build your site with, but doesn't impose design decisions that are difficult to undo.

Bootstrap and Tailwind CSS are both open source tools. GraphQL via Apollo was chosen for the data layer; GraphQL makes it simple to request just the data your app needs, and Apollo takes care of communicating with your API written in any language; doesn't have to be JavaScript! React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non responses on the server, redirecting or throwing back custom pages as needed. Leanstack was on Bootstrap 2. For StackShare, we upgraded to Bootstrap 3. Bootstrap is a framework to help you design websites faster and easier. It also gives you support for JavaScript plugins.

We started with a bootstrap based template and then completely rewrote it due to poor design of the template. Using boostrap properly was a great experience - once you learn it and use it properly, it's simple to use and very good at being responsive and adapting to the various screen view.

I simply bought a "job board" template for the website, which is written using Bootstrap 2. I'm hoping to upgrade the site to Boostrap 3 when I'll have a time. So elegant and beautiful yet easy and convenient to use once you go through all the classes and its elements. In addition, its JS function is impressive too.

Bootstrap Tailwind CSS Stacks. Need advice about which tool to choose? Ask the StackShare community! Tailwind CSS. Quickly get started with precompiled CSS or build on the source. One framework, every device: Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries. On the other hand, Tailwind CSS provides the following key features: No default theme No build-in UI components No opinion about how your site should look "Responsiveness" is the primary reason why developers consider Bootstrap over the competitors, whereas "Highly customizable" was stated as the key factor in picking Tailwind CSS.

What is Bootstrap? What is Tailwind CSS? Why do developers choose Bootstrap? Why do developers choose Tailwind CSS? Sign up to add, upvote and see more pros Make informed product decisions. What are the cons of using Bootstrap? What are the cons of using Tailwind CSS? Sign up to add, upvote and see more cons Make informed product decisions. What companies use Bootstrap? What companies use Tailwind CSS? Sign up to get full access to all the companies Make informed product decisions.

What tools integrate with Bootstrap?February 23, Tailwind CSS has recently benefited from an upwards trend of popularity and there is an increasing amount of front-end developers who choose to stick with the new CSS Framework as a new alternative. In this article I want to explore the differences between Tailwind and Bootstrap and give you as much insight as possible on this topic.

The initial release of Bootstrap happened on August 19,nearly 9 years ago. Fun fact is that it was created during a hackathon by the Twitter development team and later it was developed and maintained by Mark Otto, Jacob Thornton and a small group of core developers.

Shortly it became one of the most popular CSS Frameworks out there and it currently is the sixth-most-starred project on GitHub and it is currently being used by millions of developers worldwide. It is described as a utility-first CSS framework and they claim that development is faster with this new method. Having introduced some basic facts about the two frameworks I would like to lay out the comparison benchmarks that we will delve into in this article.

We will talk about the development process, the number of components, performance and community. Bootstrap is based on the Object Oriented CSS methodology which has become one of the most popular ways of managing stylesheets and classes.

For example, if you had 10 buttons in your application you would have 10 different classes for those buttons. With Object Oriented CSS you would instead have a lot more classes for the sizing and style of the button.

If your primary color is red, in a regular CSS file that same color would be repeated across all declarations. With Sass, such properties can become variables so if you want to change the color red, you can simply just change it in one place and it will propagate in the whole application. In Tailwind CSS you have classes for almost all kinds of margins, padding, backgrounds, font sizes, font families, text colors, shadows and so on.

Let me give you a scenario: what if you wanted to make the button just slightly smaller in a particular page? Would you want to create a whole new sizing class just for that unique case? Another great feature that I observe is the fact that you can also set hover, active and focus states using classes.

May I add that Tailwind also offers the possibility to create classes such as. Instead of Sass, Tailwind CSS uses post-css and a config file to set up the variables and configuration of your stylesheets.

Most CSS frameworks do too much.

You can add, remove or update colors, spacings, fonts, shadows anything that you can think of. In this case I must say that Bootstrap has a clear advantage because of its wide set of components including cards, modals, accordions, nav tabs and so on. Tailwind CSS has only a handful of components according to their documentation, the full list being:.

However, Tailwind CSS does have a lot more utility classes than Bootstrap does and using them you can create any type of component you want. Bootstrap has 4 files that are required to include into your project to get the full benefit of the CSS Framework. Together they amount up to In comparison, Tailwind CSS only requires the base stylesheet file which amounts up to 27kb.GraphQL via Apollo was chosen for the data layer; GraphQL makes it simple to request just the data your app needs, and Apollo takes care of communicating with your API written in any language; doesn't have to be JavaScript!

React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non responses on the server, redirecting or throwing back custom pages as needed. Leanstack was on Bootstrap 2. For StackShare, we upgraded to Bootstrap 3. Bootstrap is a framework to help you design websites faster and easier. It also gives you support for JavaScript plugins.

We started with a bootstrap based template and then completely rewrote it due to poor design of the template.

tailwind vs bootstrap

Using boostrap properly was a great experience - once you learn it and use it properly, it's simple to use and very good at being responsive and adapting to the various screen view. I simply bought a "job board" template for the website, which is written using Bootstrap 2. I'm hoping to upgrade the site to Boostrap 3 when I'll have a time. So elegant and beautiful yet easy and convenient to use once you go through all the classes and its elements.

In addition, its JS function is impressive too. I use it for a lot of professional work where I might need more than just a responsive grid. Has a great set of mixins and components and also some nice JS-modules. I love that its so style-agnostic. Really easy to add custom styling.

Foundation has been my choice for years over Bootstrap and other similar CSS frameworks due to the naming conventions, well-designed built-in components, and it plays well with React when I'm not using ElementalUI instead. Bootstrap Foundation 1. Tailwind CSS Stacks. Need advice about which tool to choose? Ask the StackShare community! Tailwind CSS.

What is Bootstrap?


thoughts on “Tailwind vs bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *