I Discovered Tailwind CSS.

I've always written CSS. I find it both exciting and exhausting, a beautiful double-edged sword.

Throughout my career, I've seen lots of different styles, methods and ways of writing CSS. I've even written CSS in some of these ways: inline styles on tables, Object-Oriented CSS, BEM, but I always avoided Atomic style CSS.

I tried BEM last year, but it never really suited the way my current job needs to use CSS in client projects. I didn't have the time to pursue it and wasn't going to be implementing it daily so I stopped looking into it.

Recently though, starting with Bootstrap 3 and now through bootstrap 4, I noticed utility classes creeping in more and more. I noticed Tachyon and TurretCSS, and then I noticed everyone going crazy about TailwindCSS. Built entirely on the premise that all you need are utility classes.

I had experimented before with using a custom CSS framework centred around CSS grid. I tried adding in utilities for padding and margins, and font size and it all got a bit confusing because I was making it up as I went along. I had some things standardised, but not all, and not enough variations of sizes and weights.

Tailwind is very well thought out and enhances and improves the web building process.

So why should you try it out?

No New CSS

• Display elements, spacing, colours, grids, floats, almost everything is already named and created
• If you need to add new CSS as all, it will likely be for something very custom and one-off

Consistant naming

Class names are consistent and easy to implement.

• For example bg-, m-, p- for background, margin, and padding. Easy, and concise.

Configurable scale

• The scale system is consistent and great from the start. BUT you can extend it, edit it or remove it.
• Everything is customisable

Purgeable

• The final step in your build process will be to remove the unused CSS classes. THIS IS BIG. Or rather, this is small! Tailwind has so many classes that keeping them all would be far too large. The purge step is fantastic and reduces bundle size down so the final CSS file is as small as possible.

Disadvantages

Component Framework

Tailwind is pretty much impossible to use if you are inside an existing system, or trying to theme something without a build step.

I write a lot of codepens when I'm testing things so it's not as though I don't like or can't write custom CSS.

FINAL THOUGHTS

There are only two hard things in Computer Science: cache invalidation and naming things.

-- Phil Karlton

This is true and something I've come across forever. In agency settings writing custom code happens frequently. Yes, clients may have style guides and full-on code that you should be using copy and paste but in the real world that doesn't work. When you build on a system that has widgets that generate certain code - and you don't have access to that code - you are stuck making things up. Sometimes you need to write custom code. And most of the time you need to name it.

I am bad at naming things at the same time as abstracting them into what they are supposed to be related to.

And then the next page has the same element but slightly differently.

Now, the downside of all the above is that in my current job I'll never be able to use Tailwind CSS for client projects. There's just too much reliance on Bootstrap (3).