Tailwind is incredible, But is it Right for you !?

What is Tailwind CSS?

Tailwindcss is a utility CSS library that is different from Bootstrap, and MaterialUI in that instead of defining classes like button, button-primary, Card, Header, and so on, they define classes like ml-7 ( margin-left:7) or display-flex or justify-content-centre. so instead of defining a card you would define all the pieces you need to create that card and then inside of your HTML, you would add classes like display-flex, justify-content-centre,text-lg, and so on and that will give you a large central piece of text that is displayed flex.

Difference between Tailwind and other CSS Frameworks

A common example of this is, inside bootstrap, you have the classes button, button-primary to create a blue button but inside of tailwind you would have a class such as padding-7 or whatever that would define your padding around the button then you have another class that would tell your text to be a certain size then you have a background colour that would specify your background colour, a text colour class for defining your text colour and you can even have classes that can help you define hover state and focus state and so on and you can set a class for when you hover over it make it a darker blue colour for example or when you click on it make it an even darker blue colour and all of this is done with individual CSS classes instead of having button and button primary.

is it worth it?

Now if you’re anything like me 😉, you probably looking at this and going “um isn’t that way way more CSS classes you have to add to your HTML it just seems like tons more work you have to do why don’t I just use button and button primary that’s so much easier” and I used to be in same mindset until i tried out and used tailwind css myself and the reason why this isn’t a problem, in my opinion, is that it makes it so flexible and easier to change in the future. Because let’s say that you wanted to add a new primary button that’s slightly darker than your original primary button. now you have to add a new class called button primary dark and what if you want a lighter version when I have a button primary light that you have to deal with and if you wanted to have like a large darker lighter version or whatever you have to combine a button primary button dark large and a button primary dark small one it just starts to get more and more complicated as you have all these different permutations but by using tailwind css all you have to do is you take the background colour css class and you just change it to be darker or lighter or you make the font size bigger or smaller it’s so much easier to tweak these individual things instead of all that doing inside of a bootstrap class system with CSS. Honestly, with components like this, you could go either way both of them make sense but where tailwind CSS and any other utility css shines when it comes to hooking that I need to create a container that’s going to be displayed flex that’s going to justify-content between these things in the centre and I want to have some margin between these different items and when you just want to lay things out in a kind of just hook manner or I need a little bit of spacing between these elements or all I need to add a little bit here or I want this to have a slightly darker background colour this is where tailwind CSS comes in handy because with bootstrap You probably can’t do that you may be able to do some rows and some columns and you can maybe modify a little bit the spacing between thing but you’re stuck with the actual CSS classes they give you which are fairly limited. While with tailwind CSS you have a huge array of different classes that are going to allow style these things exactly as you want, So Customization is where tailwind wins and where other libraries like bootstrap and foundation fail because you’re stuck with the particular classes they give you. If you want to change them well now you need to go in there and modify your CSS or overwrite them with inline styles whatever you do. It’s just a huge pain to work in my opinion which is why I so much prefer using something like tailwind over something like bootstrap. This flexibility is one of the things I love most about tailwind since it lets me write CSS essentially without actually writing my own CSS but it also imposes upon you limitations and these limitations make it so that your designs are much more coherent and they look a lot better. because instead of defining your pixel values for padding and margin saying seven pixels here six pixels there it’s going to get kind of jumbled and messed up since you don’t have a system to go by. But with tailwinds you can say p-1 or p-2 or p-3 and these are actual values instead of being like one pixel, two pixels, three pixels it may be 4 pixels, 8 pixels, 12 pixels then it may jump up where you can do 20pixels so it’s forcing you to specify exact sizing that falls within a design system. Tailwind is essentially one giant design system that you can use for styling and spacing all your elements that way you don’t have inconsistent spacing throughout your designs, where you have six pixels here and seven pixels here, it’s all going to be six pixels or its all going to be seven pixels

Conclusion

Now it sounds like I’m pretty much entirely praising tailwind CSS and, to be honest, I do really like it myself but there are definitely areas where tailwind CSS is not the ideal solution. when you are in the rough and dirty prototyping phase and the main thing you care about is the backend functionality or just the overall functionality of the site itself then go with bootstrap it’s so much easier and quicker to work with than working with something like tailwind and it really allows you to focus on the actual logic that you care about instead of worrying about design also if you aren’t very good at CSS and don’t understand CSS super-well tailwind is not a good option for you. In order to take full advantage of tailwind CSS you need to understand how CSS works at a core level because every CSS class in tailwind is just like applying an individual CSS property and if you don’t understand CSS works and how the different properties work together you’re not going to be able to use tailwind to actually create a good design, but if you already know CSS then tailwind is a great option for you