I’m a big fan of the paradigm “choose based on the current needs”, so when I had to prototype a recent client project on a tight budget, I made a choice that I found risky but was the best for this project: Using TailwindCSS.

I know there’s quite a debate on whether TailwindCSS is cool or just a tool circumventing the technological benefits of HTML and CSS. Anyway, I chose it to be the preferred tool for this project because it had a

• limited budget
• no predefined design choices but should have a modern look
• an interactive design prototype was needed upfront but with a good chance that it’ll go live without big further changes

Figma & Xd

First I tried to create an interactive mockup in Figma — finally a project to really test it but I found it less intuitive than other tools. So I switched to Adobe Xd which I’m more used to. But after a couple of hours I was far from having a showable prototype that excited me so I found it was worth challenging the choice again.

The Kirby + TailwindCSS test

So I set up a timer for 3 hours as a deadline for the next test: Set up Kirby CMS which was the choice for the project anyways together with Tailwind CSS.

I pasted a lot of content into Kirby which saved me formatting content and after one hour I had the basic system and content running. Now I had two hours for the design which I had started already in prototyping tools.

Once I had the tailwind docs open (with the awesome cmd +k quick search), I had the first prototype version finished until my timer rang.

Two days later I showed it to my client and they liked it. We discussed a couple of things around the design, colors and content but nothing substantial. Changing colors was as easy as editing some HTML classes live in the client’s browser due to Tailwind’s logic.

(Subjective) downsides

Of course there are some notable things that I don’t like too much about the approach: TailwindCSS is a library that serves a lot of ready-to-use things. By default if you’d use just the normal CSS of the project it comes with 4MB of CSS file size.

Gladly, there’s the Tailwind CLI that lets you exclude all the things you’ll definitely not use in this project. With that I compressed the stylesheet down to 18kb. That’s quite okay in my opinion, actually a lot of my other hand coded CSS projects didn’t come with a smaller stylesheet so when you configure it well, this is not an issue.

That leaves me with the only critique on Tailwind I always had and will probably always have: I don’t like having styles set all in HTML as classes and it bloats up the markup a lot. Counter argument is that it’s easy to understand and perfect for prototyping.

By the way this remembered me that a few years ago a friend of mine and I considered building a style stack that’s configurable via individual HTML classes or data-attributes, basically what TailwindCSS does. What hindered us was the massive HTML overload and thus increased file size of the HTML document and the amount of work to create the library. For the project back then I probably would still not use TailwindCSS due to the complexity and performance aspects of the project. For others, small ones without very custom design I like the tool.

Sum-up

Now that the project is finished I reflect on it and think it was one of the best choices for this project to use TailwindCSS for it. It saved me ton of work and made it possible to create this project on a super tight budget while making it still look great.