My first experience of Tailwind CSS was at my current job where we use it for the dashboard as well as for the marketing site. My initial reaction was, “what fresh hell is this?”.
I have used a few CSS frameworks in the past such as Bootstrap, Foundation and Bulma, and they all have a fairly similar way of working.
For example, let's take the familiar card component that we see on a lot of sites and see how it compares across these different frameworks.
Bootstrap #
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Foundation #
<div class="card" style="width: 300px;">
<div class="card-divider">
This is a header
</div>
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
Bulma #
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img
src="https://bulma.io/assets/images/placeholders/1280x960.png"
alt="Placeholder image"
/>
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="https://bulma.io/assets/images/placeholders/96x96.png"
alt="Placeholder image"
/>
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
iaculis mauris. <a>@bulmaio</a>. <a href="#">#css</a>
<a href="#">#responsive</a>
<br />
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>
Just from looking at the code if you didn't know the frameworks really well you would be hard-pressed to tell them apart.
I find with these CSS frameworks that you have to like the default style that they come with. Yes you can customise the look of each of them, but generally it is a lot harder than it should be. This is why all bootstrap websites end up looking the same.
Tailwind CSS #
Tailwind uses utility CSS classes instead of the more component classes that all the other frameworks use.
This is what a Tailwind card might look like:
It looks much like all the other cards we have seen, but the code is very different:
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 pt-4 pb-2">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#winter</span>
</div>
</div>
When coming from these other frameworks the HTML definitely looks cluttered and repetitive. In reality though you wouldn't have tags written out like this in your code. You would have a tag component instead or have it inside a loop.
Going down the utility class route does have a few benefits:
- The code is more portable. I am not just talking about moving blocks of code around in your own project as that should work anyway with all the frameworks. If I see another website using Tailwind and I like how something is styled I can just copy the HTML and will be able to easily replicate it on my site.
- Easier to customise. It is easy to see here that if I didn't want everything to be rounded I can just remove the rounded classes from my code. With other frameworks I often find myself having to override styling with
!important. - Quick to prototype. Once you learn all the classes it is quite easy to prototype something quickly. You don't need to write any CSS at all, and you can just concentrate on the HTML. LLMs are also quite familiar with Tailwind so you can easily get help from them too.
For example, I asked GPT-4.1 for this:
Create me a visually appealing book component that has a book cover, the title, a short description and a star rating. The component should be simple HTML and use Tailwind CSS v4. The component should use dark mode.
This is what it came up with. 
With all things there are a few downsides to using utility classes:
- Wide scale changes become harder. If I wanted to change the text colour on my website I would have to update every single occurrence of a class instead of a single point in a CSS file. You can override colours in Tailwind, but that might not be what you want. You could however set up some semantic colours that could be changed.
- Slight learning curve. I already know CSS quite well so don't need to think what properties to add to my CSS to get things to work. With Tailwind, I often have to look up how to do something. You can get extensions for VS Code that will auto complete classes for you, so this is becoming less of a problem.
- Consistent styling is harder. With each element having its own classes applied it is up to you to make sure all the elements on your website have consistent styling. If you are using rounded corners then you need to remember to apply this to all your different components. Once you pick a colour you need to use it consistently throughout your site.
With my website I went with completely custom CSS. I didn't want the bloat of a framework like Bootstrap or the generic styling. The more I work with it though I realise that I am not a CSS wizard and things are starting to become harder to manage.
I have also found myself slowly including my own utility classes like text-center to make things easier.
Converting to Tailwind #
I have come to the decision that it would be a lot easier if I just embrace Tailwind on my own website. However, I know have the task of converting all my CSS into Tailwind components.
Luckily there are quite a few tools that will help you convert CSS into Tailwind classes like this one: CSS to Tailwind Converter
Tailwind also has the @apply directive that lets you effectively create an alias for a group of Tailwind classes which could be useful if you find yourself repeating the same styling over and over again.
.select2-search { @apply rounded border border-gray-300;}
I could just convert all my existing styling to Tailwind this way, but I think I would lose most of the benefits of using Tailwind if I did this.
❤️ Picks of the Week #
📝 Article — P-Hacking in Startups — I haven't done much A/B testing, but there is some useful advice in here if you do. I can see how easy it is to come up with wrong conclusions from A/B results.
🛠️ Tool — Airpass‚ Easily overcome WiFi time limits — If you are on a Mac and are frequently at places that have free WiFi for a period of time then this could be a lifesaver.
🛠️ Tool — Getting Started with Obsidian Bases — Obsidian Bases is still in early access at the moment, but I am excited for it. It is essentially the power of Notion databases in Obsidian.
🛠️ Tool — Nxtscape, an open-source agentic browser — This looks like an interesting project. If the future really is AI agents then I am glad there is a project like this that is open source and works with open source models.
🛠️ Tool — Harper‚ an open-source alternative to Grammarly — I have been using the free version of LanguageTool on my computers, but this looks much better. The free language tool server is quite limited to what it can do and often misses some of my grammatical errors.
📝 Article — MCP is eating the world — I have been experimenting with MCP servers recently, and they do look like a great way to for LLMs to interact with other services. The easiest way I have found is to set up an MCP server in n8n, and then you can hook up lots of different services to it. There is definitely a user need for an MCP server that links together lots of services.
🛠️ Tool — LibRedirect‚ Redirects popular sites to alternative privacy-friendly frontends — If you don't like adverts or sites tracking and profiling you but still want to access them there are some great alternatives here to protect your privacy.
🛠️ Tool — Git Notes: Git's coolest, most unloved feature — I must admit I didn't know about Git Notes. They look like a useful feature. I can only assume that GitHub stopped displaying them to force users to use the GitHub alternatives.
🎵 Music — Ambient Garden — This is a cool little project. This “music” would probably be good to work to as well. Just stick it on autopilot and get in the zone.
📝 Article — GitHub CEO: manual coding remains key despite AI boom — I have tried “vibe-coding” a few times, but I don't like the fact that I am not always clear what it is doing, and the code ends up becoming a mess. After a while the project gets so large that even the AI can't understand it. Even for small requests I often find my self prompting, “Wouldn't it be better if you did….” and I often get a “You're absolutely right…” response back.
📝 Article — i used to be a blinkist user — I generally read for pleasure, even non-fiction books. I like learning something new and understanding the thinking behind an authors points. These summary apps give the impression of being productive and learning something, but it often leaves your head after reading them. I find writing my own summaries on books I have ready a better way of retaining information.
🛠️ Tool — MCP in LM Studio — I use LM Studio on my Mac to load LLM models to try out. It is good to see it now has MCP support out of the box.
🤖 AI — ISSEN — one of the books I was reading recently featured an AI language tutor that adapted to your learning style. This is nowhere near the level of sophistication that this fictitious AI tutor had, but you have to start somewhere.
📝 Article — Many ransomware strains will abort if they detect a Russian keyboard installed (2021) — This looks like an easy way to add an extra layer of protection from ransomware. Of course the easier way is to stop using Windows, just a thought!
📝 Article — That boolean should probably be something else — I agree with a lot of these. In C# I often find myself using OneOf or something similar to return different states from a function. It is certainly a lot nicer than returning a boolean and then a reference to something from the parameters.
📝 Article — Nostalgic Tech — I think it might be an age thing. I dug out my CDs from the loft at the weekend and considering getting a CD player again instead of streaming everything. I am probably just old, “back in my day...”.
🛠️ Tools — My Favorite Apps Launched in 2025 (So Far) — I love self-hosting stuff and have quite a few on my home server. Surprisingly I don't have any of these. Rybbit looks particularly good for analytics.
📝 Article — After months of coding with LLMs, I'm going back to using my brain — I don't really enjoy “vibe coding”. It is like trying to manage an incompetent intern who doesn't fully understand what you are saying. It is great when I need it to make a very specific isolated change or convert some JSON into a contract. I have mostly gone back to copy and pasting from the AI chat.
💬 Quote of the Week #
“I am an old man and have known a great many troubles, but most of them never happened.” — Mark Twain
Top comments (0)