more info ⬇

@amattn

SW engineering, engineering management and the business of software

subscribe for more
stuff like this:

2021 01 28

Advanced Tailwind CSS Tricks

I don’t spend a lot of time blogging or thinking about CSS much. To be honest for many many years, there wasn’t that much interesting happening in the CSS world to me personally. The spec advanced, but it was just a layer of paint I splashed on at some point in the development cycle.

Tailwind

Something changed however, when I discovered Tailwind CSS. Tailwind launched it’s first alpha bac in November 2017. The official v1.0 was released May 13, 2019. It came a cross my radar sometime in 2020 as my network started chatting about it. Tailwind UI1 was a paid product that launched to tremendous success in early 2020. This success allowed the core developers to build a business and hire a small team around TailwindLabs.

I started learning and using Tailwind shortly after Tailwind UI was released in 2020 and v2.0 arrived in November 2020.

Having done this very short history of the project, it should be obvious by now that I believe Tailwind CSS to be an amazing project and I think it can be one of those development points of leverage. That is to say, investing in Tailwind CSS has a transformative ROI. Not many technologies can make that claim.

What makes it amazing

The biggest issue with CSS is that it’s hard to compartmentalize. It’s designed for side effects2 and that makes it so most CSS is fragile.

Tailwind kind of reject half of CSS. The tagline is “Utility-First” which kind of means: never style your ids, only style your classes. Above that, they also kind of rewrite a good chuck of the classic css syntax.

Thus:

  1. There’s a learning curve
  2. Your CSS is deeply embedded into your HTML

All I can say is don’t worry about it, because they essentially took a fragile yet essential piece of web tech and somehow massaged it into something beautiful. And as an Engineer, I don’t mean beautiful aesthetically, but beautiful in that you can build great looking web components that don’t break other parts of the page as you layer them in.

In other words, properly using Tailwind CSS results in high product velocity. And as Engineering Manager and Entrepreneur, that’s really the best thing I can get out of my tech stack.

To be clear I don’t mean just shipping features fast. Embedded in the notion of high product velocity is that you not only launch quickly, but also that you have low defect rates, tech debt accumulation and mental trauma over the lifetime of the code you write. Unlike any other CSS framework, library or ecosystem I’ve come across, Tailwind achieves this.


  1. I’m a paying user of Tailwind UI and I’m a huge fan. Tailwind Labs continues to add more and more components and example designs. It allows me to punch waaaaay above my weight level as a non-designer. You still need to know CSS, but the component are very well designed. The implications for me personally is that it allows me to save time and money by not having to hunt for new templates every time I work on a new project and in somecases, bypass the need to hire a designer for things like an MVP or early launch.

  2. Don’t get me started on the !important nonsense.




you should follow me on twitter at twitter/amattn and on twitch.tv at twitch.tv/amattn

you may also be interested in some of the greatest hits of amattn.com:

〜 The Sublime Developer Efficiency of Elixir, Phoenix and LiveView

〜 The Business Case For LiveView Is Strong Enough To Change How You Staff Your Dev Team

〜 Empathy as a Core Engineering Requirement

〜 Venture Capital Math 101

〜 What is Engineering Management?




the fine print:
aboutarchivetwittertwitchconsulting or speaking inquiries
© matt nunogawa 2010 - 2021 / all rights reserved
back ⬆