DEV Community

loading...

Tailwind. My experience using it for a month now.

patriscus profile image Patrick Ahmetovic ・5 min read

Let's be honest. Writing CSS can sometimes be a b*tch. As projects grow larger, the CSS styles can become quite hard to maintain - from naming things, trying to align content perfectly and figuring out which selector overrules your new styles.

As a result, people have come up with many ways to make it easier for us. Some like to use CSS-in-JS. Others are vigilant about using BEM naming to make sure their styles are named descriptively. Frameworks such as Bootstrap & Tailwind are helping by providing a pre-defined API you can use to make your designs come to life.

Grass field in the wind

I was recently excited to hear that I got the chance to use Tailwind in one of our new projects. I have been meaning to learn more about it as I have heard good feedback within the community and online channels.

This post is a short summary of all the things I got to learn about Tailwind during the first month of using it and what my experiences were like.

What is Tailwind?

Tailwind promotes itself as a "utility-first CSS framework for rapidly building custom designs." The philosophy of Tailwind is to provide an API (utility classes) which you can combine to go from design to implementation. Using these classes in your HTML markup has another effect: all your styles are visible from within the markup itself. What do I mean by that? Let's look at an example:

The example shows an image with a rounded border and box shadow applied. The image is contained in a div that defines padding around it.

As you can see, not a single (custom) CSS rule was needed. Everything was achieved by using the utility classes Tailwind provides. We are able to get a sense of how the element will be styled just by looking at the HTML directly.

Tailwind offers many features that make this possible: built-in functionalities for responsive design, pseudo-class variants and other things. Please make sure to check out the docs to get a sense of all the cool things Tailwind can do.

Alright enough about Tailwind. How was my experience?

Pros:

Pin with a heart on it

It's customizable.

Tailwind has been built with customizability in mind. As of now, I was able to easily change spacing values, font families or colors with ease. The great thing about this is that Tailwind does not restrict you in any way. Although it provides (in my opinion) very sensible default values, you are free to change them as you please.

It establishes a rule set for both developers & designers.

With the power of customizability, Tailwind (or more so the Tailwind config) is great at being the source of truth for your designs. After collaborating with designers, it is easy to transfer the properties & values agreed upon (e.g. spacing) to Tailwind. This helps tremendously when implementign designs as all the values (ideally) are in the pool of utility classes. If, for whatever reason, one of those values is modified, all changes are immediately visible in all parts of your application. As an example, let's suppose you change the font size value for xl from 1.25rem (the default) to 1.35rem. Now every element you have applied the text-xl utility class will automatically use your new value.

No naming. No problems.

Although I initially thought that this aspect will only play a minor role for my development workflow, I have got to love not having to come up with well-named CSS classes. While previously I have enjoyed using BEM naming, I still had to regularly debate with myself on how I should name certain elements. Tailwind removes that part entirely, making you focus more on what really matters: the styles to use.

Specificity.

As projects grow bigger, maintaining CSS styles tend to also become harder. During the first month, I could also observe that another advantage to using Tailwind is that it requires no effort to overwrite (or add) new styles. In a perfect world, developers wouldn't have to address overly specific CSS selectors which overrule newly applied styles. Unfortunately, I don't live in this perfect world. In the past I have seen selectors constantly clashing with my styles, thus leaving me to add other overly specific styles. While this is not ideal, I am happy to see that Tailwind (so far) removed this as each element is only composed of the utility classes they need.

Cons:

A puppy wrapped in a blanket, looking rather sad

One off styling.

One of the biggest advantages of Tailwind is that you can craft a well defined configuration upon which your utilties are generated. However, this is also part of one of my biggest pain points - one off styling. Sometimes the design requires to go out of bounds with the options that are laid out to you. Sure you can discuss to add them in the config but sometimes that is also not the best option, as this style might only really be needed in that specific case.

In Adam Wathan's great talk on Tailwind best practices, he mentions that using inline styles can be useful to go around these obstacles. In most cases this tip was already enough for me and I was able to happily move on. In other cases, it still didn't feel quite right (keeping in mind that this is subjective). As an example, inline styles do not support media queries which you might need for one off cases.

Your markup may get polluted.

Moving all your CSS rules from a stylesheet to the HTML markup naturally makes your class="" attributes grow quite large. Especially when the element needs a lot of those to be responsive and look good on all devices.

I am not bothered much by it. However, I can understand if other developers may find it ugly or too "noisy".

Final thoughts

I have been using Tailwind for a month now. So far I have enjoyed the process and I am excited to see how using this framework will scale as more and more of my projects will use it. I would recommend everyone to spend little time playing around with Tailwind and see how well it integrates with your projects.

If you have used Tailwind, have any questions or just want to say hi, please feel free to comment below. You can also reach out to me on Twitter.

Discussion (23)

pic
Editor guide
Collapse
gsarig profile image
Giorgos Sarigiannidis • Edited

Long ago I've decided that CSS frameworks arent for me, and the main reasons for that are:

  • I don't like the messy markup they force you to write.
  • If you need to implement a rather complicated design from an XD, PSD or whatever, a framework can even become an obstacle.
  • Too much unused styles that you have to load anyway.
  • If I return to an old project and in the meantime I've switched frameworks, remembering the old framework's conventions can be annoyingly hard. The same goes if I have to pass my work to somebody else, and that somebody uses a different framework. Using vanilla CSS seems much more future-proof and flexible.
  • When I used to use Bootstrap, something felt wrong to me. Instead of learning CSS, I tried to learn the logic of a framework, often forgetting what is under the hood and how to write actual CSS.
  • CSS has so many exciting developments (variables, grid, flexbox etc) and IE use is fading, so using a framework doesn't save me from as much trouble as before. To me, spending time learning a framework simply doesn't seem to worth it anymore.
Collapse
hnicolas profile image
Nicolas Hervé

The third point is not a problem with purgecss that strip unused CSS.

Collapse
dillonheadley profile image
Dillon Headley • Edited

But there is the problem of adding more tools to your tools. More setup, more reading docs, more breaking points with version changes etc

Thread Thread
hnicolas profile image
Nicolas Hervé

Si I suppose that you don't use autoprefixer for the same reason. Sure vanilla CSS is great but have a good time remembering all vendor specific prefixes. This will also reduce your CSS readability a lot...

Thread Thread
dillonheadley profile image
Dillon Headley

It depends on the target browsers and project size, so no not always. For modern browsers it does little and vendor prefixes are being phased out of modern specs like grid. I’m not against tools. But there is a cost to each tool you add to a project. Adding blindly will bite you later

Collapse
moopet profile image
Ben Sinclair

I've never understood how these tools are supposed to work. Even if you brute-force it by scraping the entire site you're going to miss a lot of dynamic classes added by ajax or rich text editors and such.

Collapse
rahulh123 profile image
Rahul

I can relate to these points. I agree with the original post that CSS can be hard to manage and organize as a project grows. However, as a UI designer, I like to design what I want to make before I make it. Once I am done, I always struggle to stick to my original design when using a CSS framework. Using CSS frameworks in my opinion is nice when I don't have a design in mind and I just want to cram together whatever I can find, but when I am following a design, I am trying to get the finer details accurate. When I am trying to get the details right, it's just a headache for me to figure out how to do that with the CSS framework I am using. As you said, it's more like learning the logic of a framework, and it becomes an obstacle.

Collapse
gsarig profile image
Giorgos Sarigiannidis • Edited

I fully understand what you are saying about the usefulness of a framework when you don't have a design in mind or when you are prototyping. That's a scenario where I might consider using some framework too, as long as it didn't have a steep learning curve.

With my original post, I didn't mean to say that frameworks are inherently bad, but that they simply don't meet my personal requirements. Writing vanilla CSS has a few challenges of its own, but to me dedicating some time for it is worth it, as it is a knowledge that stays. On the other hand, if you dedicate time learning a framework and then move to the next framework, the hours that you spend learning the old one seem like wasted time, as they are of no use anymore.

Some time ago I had written a post of my own explaining those views of mine in more detail, for anyone interested.

Collapse
patriscus profile image
Patrick Ahmetovic Author • Edited

Valid points, thanks for sharing them. I can certainly understand why you would rather omit the usage of a framework. However, as of now I'm still enjoying the process of experimenting with it but I am curious to see how my opinions & views will change in the future.

Collapse
jfbrennan profile image
Jordan Brennan • Edited

I share some similar feelings about it all. I've gone back and forth over the years and now I think large, bloated UI frameworks have had their day and it's time to get back to small, simple, balanced. I'm building my own out of desperation for something genuinely small and easy.

Collapse
lemedro profile image
Furkan Kartal

Your 5th point was actually the opposite for me. I hated css and never really grasped it fully. But css frameworks (tailwind in this case) taught me the logic behind css without all that bloated codes. And that at the end helped me learn css. I agree with all the other points you've made, but I would suggest tailwind to everyone just because of this one reason that it may help them understand the logic behind css easier.

Collapse
perpetualwar profile image
Srđan Međo

I came to same conclusion some time ago.

Collapse
yellow1912 profile image
yellow1912

I like it, it use it. But I think they are running out of ideas. Adding gradient to it is a joke IMHO. You basically have to add a bunch of classes just to control the gradients. As if I can remember all that. I think the utility classes should stay utility, should be simple and nothing beyond that. Leave the rest to custom code when necessary.

Collapse
nstsfd profile image
Can

Thanks for sharing your experience with Tailwind. I've been thinking about learning it but had some questions in my mind. Like you said, the best thing to do is playing around with it and decide if that's a good one to use or not.

Collapse
patriscus profile image
Patrick Ahmetovic Author

Exactly. They recently published play.tailwindcss.com/ - you can try it out with no setup whatsoever and play around with the classes & config!

Collapse
nstsfd profile image
Can

Oh this is great! Thanks!

Collapse
jfbrennan profile image
Jordan Brennan

Good insights, thanks for sharing. I'm curious if you still define abstractions like <div class="my-component p-4 rounded md:h-full">?

Collapse
patriscus profile image
Patrick Ahmetovic Author • Edited

Thanks for asking! Not as of now as I rather try to extract the markup to different functions/partials/components (whatever you want to call it) and use them that way. I also try to follow the advice that's out there:

But I'm curious to see how useful the feature of component classes will be in the future for me

Collapse
jfbrennan profile image
Jordan Brennan • Edited

Yeah, same here. Even component classes when a framework is not being used (the first option in the flowchart you shared) actually make way more sense as a custom HTML tag (or Custom Element if js is required). You can do some pretty cool stuff with custom HTML tags alone (this is my project btw): m-docs.org/accordion

That Accordion and its Details elements are just HTML and CSS. They're simple enough that a custom HTML tag and native dialog with their own styles make for a better API than tons of classes. But additional style customization makes sense to be done via utility classes (like Tailwind).

Collapse
urielbitton profile image
Uriel Bitton • Edited

I never liked CSS frameworks. For the following reasons:

  • You don't attempt to make use of css anymore
  • Super messy markup, as others have mentioned
  • You need to consult the docs to do basic things like adding box shadows
  • you will inevitably need some additional css - and that will produce 2 css files which will decrease page load speed.
Collapse
bonfiglioalessio profile image
<A.BONFIGLIO/>

Great article, i want share these tricks!

  • One off styling With md: / sm: / lg: you can use media query ✌️
  • Your markup may get polluted If you use npm for install Tailwind CSS you can custimize and add "preset style" with @import in css. 🙂 So, the attributes dont grow large.💪
Collapse
patriscus profile image
Patrick Ahmetovic Author

Thank you for your tips! I still have things to look into and your suggestions seem promising 🙂

Collapse
futureistaken profile image
R Z

You could learn something really useful instead of wasting time on the tailwind. I mean it!