No Time Dad

A blog about web development written by a busy dad

Tailwind CSS Tricks, Tips, and Thoughts

Intro

So I have been using Tailwind CSS for a little while now and I have to say that I am really enjoying it. I really thought I was going to hate it and not be productive in it all, but I think the exact opposite is happening. I realize that is sort of cliche at this point, but I am being honest here. I do, however, think that Taillwind probably isn’t for everyone. I am also still not 100% convinced yet that Tailwind is good fit for writing apps with Django, but I’ll continue working with it and giving it a fair shot.

At this point I learned a few lessons while using Tailwind, as well as a few tips and tricks that make life easier.

Learning Curve

This is an interesting one. I think using Tailwind CSS can have a steep learning curve if you are not already pretty comfortable with CSS in general. It is interesting because it is not really Tailwind’s fault, but rather just a lack of knowledge on the users part.

What I’m saying is that if you do not have a strong understanding CSS and are not comfortable writing CSS by hand without a framework then you will likely have a hard time with Tailwind. If you are used to using frameworks like Bootstrap, Material, or Bulma that provides many things out of the box for you it might come as shock that Tailwind isn’t going to provide you with anything out of the box. You are expected to create all of the “components” yourself. You won’t find a btn btn-large or anything like that anywhere in Tailwind.

I honestly found the lack of components refreshing. I can’t tell you how much time I have spent wrangling with these web frameworks trying to do custom things, but again I am pretty comfortable with CSS so the learning curve was less steep for me. Using Tailwind somehow feels like a quiet rebellion against the big frameworks.

If you do feel like you could brush up on your CSS skills, I highly recommend the MDN Web Docs.

Documentation

The Tailwind docs are excellent. The search feature on the site is the killer feature. It works perfectly and I usually find exactly what I’m looking for really quickly. Kudos to them for putting together such a wonderful site, built with Tailwind no less.

It is not exactly documentation, but Adam Wathan (Tailwind’s creator) has a YouTube channel where he basically just builds and re-builds things using Tailwind and explains his thought process and approach. Even if you aren’t using Tailwind his videos are super helpful and insightful.

Another good place to go for help or inspiration is Tailwind UI, which is the “commercial” side of Tailwind. They have a few examples with (and without) code that you can look at and poke around with. Some of their more desirable and fancy layouts are paywalled, but you can still see them and get some inspiration from them.

Tools

The main tool I am using at the moment is the Tailwind CSS IntelliSense extension for VSCode. Obviously, the IntelliSense aspect is nice because you just see all of your options as you type but I also really like that you can hover over a Tailwind class and see the raw CSS behind it. I have found that to be the most helpful part of the extension so far. The only issue I’ve had with it is that because of the size of the Tailwind CSS file pre-purge is so huge (170k lines), sometimes the extension eats up the resources on my computer. Maybe future versions will have some improvements there.

I also recently stumbled on tailwind play, which is Tailwind’s “playground”. You can try out Tailwind right in your browser, which is super convenient.

Conclusion

So yeah, still early days for me and Tailwind but I am liking what I am seeing so far. I’ve mostly just been trying to replicate some of the components on the Tailwind UI page just to get a feel for things, and so far it has been good. We’ll see if I can figure out a way to use it in Django without losing my mind.