When I decided to teach myself Tailwind it was mostly because I had become frustrated with the standard CSS framework.
I was building websites using standard CSS, but I was getting annoyed trying to set up responsive design properties and found myself jumping back-and-forth between my HMTL and CSS files to make sure I was connecting the right properties to the right elements.
Working with standard CSS was cumbersome and I knew there had to be a better way.
In my process of learning standard CSS, I had heard about Tailwind several times before. It was touted as the next new thing and while I had heard it spoken about only positively I had also learned to heed other programmers advice, which is to be wary of investing in new frameworks.
As I have learned, frameworks can be mirages of added productivity; things that look great from afar, but once you begin to actually put in the effort and use them realize that they offer no material value.
Well, I’m here to tell you that Tailwind is not one of those frameworks lacking real material value. I enjoy using it myself. Not because I have to, but because I find it really useful while working on small projects.
Here's what Tailwind does for me that makes me find it so useful:
Tailwind helps me keep my creative momentum going when I create and design elements.
Normally, when I'm creating HTML and CSS I have to think about them abstract from each other and then connect them using an additional number of steps.
I need to think of class names and I need to organize CSS properties in different sections of the CSS file so it looks good on both desktop and mobile devices.
#tagline {
text-align: center;
padding-top: 192px;
padding-bottom: 64px;
max-width: 640px;
}
@media screen and (max-width: 414px) {
#tagline {
text-align: center;
padding-top: 128px;
}
}
I need to go back and forth between adjusting CSS class properties and seeing how content looks in my browsers.
Making adjustments to my content and its style in different files makes it harder for me to mentally keep track of the changes, stay organized, and designing quickly.
Small additional steps in my code’s organization and holistic thought process cause me to lose momentum.
Contrast that with working with Tailwind.
<div class="max-w-screen-sm text-center pt-32 sm:pt-48 sm:pb-16"> </div>
In Tailwind, I think about what I want to create and design it in the flow. I don’t need to come up with CSS class names and ids. I don’t need to search for CSS class and id names to adjust the appropriate property of a global element, or then have to worry about if I’ve made a change that will break how something else works.
Now if you normally implement your web designs using standard CSS, you may be wondering how Tailwind is different from in-line styles.
The answer is that in-line styles don't allow you to include responsive media queries, meaning that in traditional CSS you are forced to use media queries by declaring them in your CSS.
But of course, you also know if you use media queries that the class names and ids must also then be duplicated into separate sections which then prevent you from seeing both desktop and mobile device settings in a single view.
Of course, this separation between desktop and mobile within your design thought process poses a very significant problem.
Without having an easy way to see both types of devices style code, you’ll likely be spending more time and effort testing your website or application’s front-end design.
For me, that would mean spending more time in the responsive design tool of Mozilla’s developer edition browser, but for you, that may require testing on multiple browsers including, god forbid, Internet Explorer.
So if you're using standard CSS you have to jump around inside of the CSS file to see how the design is connected to your content.
In Tailwind, you can see how content is designed for different screen sizes directly simply by reading the class names of the content itself.
The trade-offs of using Tailwind
Using Tailwind requires you to have a decent understanding of CSS to get fully up and running.
People who are new to CSS may not feel comfortable using Tailwind, just like they might have difficulty designing standard websites from scratch.
Tailwind uses different syntax than standard CSS to declare style properties. This syntax is based on standard property names and attempts to be both shorter and more readable, however, you’ll still need to learn this new set of syntax to implement Tailwind into your designs.
Luckily, for people who are looking to transition to using Tailwind, you'll be pleased to hear that Tailwind has some of the best documentation of any framework on the Internet.
As cumbersome as it might be to read the documentation for different JavaScript methods on Mozilla’s MDN, the experience of reading the documentation for Tailwind is a polar opposite.
In every possible example I have found, searching how to implement a specific CSS property in Tailwind has resulted in me finding a well written and accessible example of both the style being implemented in practice and exactly how I can implement it myself.
Unlike other framework’s homework-like documentation, Tailwind’s documentation is a pleasure to use.
Shortcomings of using Tailwind
Just because Tailwind is a CSS framework I find extremely useful doesn't mean that it doesn't have some drawbacks.
You will find yourself creating custom CSS to implement typography and implement global values if you have established brand guidelines, color values, and non-standard element properties.
If you’re creating blog content and long-form writing, you will instantly be struck by Tailwind’s complete reset of HTML element design, which renders your previously easy and repetitive use of standard HTML elements to style your articles and long-form content useless.
Of course, you could recreate your styles using custom CSS again, but thankfully the team behind Tailwind has heard its users' repeated cries and created a solution: Tailwind Typography.
Tailwind’s Typography plugin lets you style content using standard HTML elements like you’re used to. All you need to do is install the plugin and declare "prose" as a class property before you can start writing like you used to. So if you were worried about having to style every header tag, fret not.
Another shortcoming of Tailwind is if you’re mindful of performance, specifically data and speed.
Tailwind's CSS package is large. The package size of loading the entire library into your site according to Tailwind is 45.2kB compressed and 1941.7kB raw.
That’s a pretty hefty file to ask users to load before they can see your site’s content. However, as Tailwind’s team and documentation will readily tell you, this size is not representative of Tailwind’s true file size.
That’s because when you’d be using Tailwind within a production-ready application you wouldn’t need to include the thousands of utility classes that Tailwind offers as options, but instead can shed off the vast majority of its size so you would only use the tiny fraction being utilized on your site.
Top comments (5)
The very purpose of CSS is to separate layout from design. It exists to layer on top of html. Tailwind comes with the benefit of bringing us all back to the glorious '90s when everything was just packed in the html.
Pretty good point here: betterprogramming.pub/tailwind-css...
Just learned today about Tailwind and looking forward to the next project to try it.
I love to design a websites and thats why stuff like semantic ui with styled components was a big NO NO for me.
Tailwind make live easy for responsive design.
Great article! Thank you.
I also think, it heavily depends on the complexity of the projects and how you structure your code. The idea of having your styles and markup at the same place is very intriguing.
However, one downside you forgot to mention, is the readability of your markup. Yes, you can quickly grasp what the code does but you can't really understand the semantics of the code. That's probably okay for small projects but for me personally, I prefer to write down some class names and CSS components (BEM or CUBE or whatever) so I can still understand the meaning of the markup 5 years from now.
Of course, it totally depends on your personal taste and experience. But if I speak for myself I'm glad not everybody who designs websites uses Tailwind ;)
Thanks for the article!
I used Tailwind on my last project.
My experience -> It is addictive, now I want to CSS everything :D
I love Tailwind for small simple projects. But a major drawback is having a messing HTML file. On large complex projects, I cant use tailwind at all. For some projects, I need to have a separation of concerns.
I hope Tailwind keeps improving and can make it to where everything is in a CSS file and not in HTML in a vast and simple way. Or my experience it will never make it to major enterprise applications. In many cases its better just to write you own CSS