Tailwind is the best CSS framework for vibe coders

A practical guide to using Tailwind with Claude Code and other AI tools for building web apps

TLDR: If you’re vibe coding with Claude Code or similar AI tools, switch to Tailwind CSS. Its utility-first approach means the AI can style elements inline without referencing separate stylesheet files, resolving class conflicts, or fighting framework defaults. I moved all my projects from Bootstrap to Tailwind and the difference in build quality (and debugging time!) is night and day.

---

Workshop Alert: I hosted a live workshop on this exact topic on Friday, February 13 at 3:00 PM US Central for my paid subscribers. It covered how to get started with Tailwind, key dos and don’ts, and how to create Tailwind-specific subagents. The recordings plus useful templates are now available on the paid subscriber portal. Details at the end of this post.

---

Disclosure: This article was written by me, a human. Claude helped me organize my notes and provide examples of Bootstrap and Tailwind syntax. All opinions, typos-caught-too-late, and opinions about CSS frameworks are entirely my own.

I used Bootstrap for my first projects

When I started building my first AI-powered tools—Good Bloggy (an AI-powered content studio) and StackDigest (a newsletter discovery and analytics tool)—I used Bootstrap without really thinking about it. It was the framework everyone, including the various AI tools I used for coding help, recommended. It had a massive community. The documentation was thorough. And the default components looked…OK.

Not great. Not polished. Just OK. The default Bootstrap look has a certain “you downloaded a template” quality that feels dated now that so many sites are adopting more modern frameworks. The buttons, navbars, and cards are straightforward and usable, but also distinctive. If you’ve done a certain amount of web design, you can spot a Bootstrap site in about three seconds.

Of course, if you need to build a site quickly and you just need the UI to work, Bootstrap is a great option that’s been successfully used for many thousands of sites.

This short video shows what some common Bootstrap components look like:

Bootstrap didn’t play nicely with my custom CSS and JavaScript

As I developed my projects, added branding, and incorporated user feedback, I started customizing the CSS that governed what my UI looked like. I worked with AI to develop custom CSS and JavaScript to override Bootstrap’s defaults. I changed colors. I adjusted spacing. I rewrote the navbar. Well, you get the idea.

And that’s when the problems started.

Bootstrap uses a specificity hierarchy that makes overriding styles surprisingly painful. You write a custom class, and Bootstrap’s built-in styles win because they’re more specific. So you add !important. Then another !important. Then you’re six layers deep in CSS specificity hell and your stylesheet looks like a declaration of war against your own framework.

The JavaScript conflicts were even worse. Bootstrap ships with its own jQuery-dependent scripts for things like modals, tooltips, and dropdowns. When I tried to customize behaviors (e.g., a dropdown that filters on keypress, a modal with custom animations) my custom JavaScript would clash with Bootstrap’s event handlers. I spent more time debugging framework conflicts than building actual features.

For example, when I was using Claude Code to help build these tools, the AI would generate Bootstrap-based code that looked correct but was riddled with subtle conflicts. Claude would add a custom class, not realize it conflicted with Bootstrap’s internal styles, and the result would look broken in ways that were hard to diagnose. The AI couldn’t “see” the cascading conflicts it was creating across multiple files.

Then I tried Tailwind

I first heard about Tailwind CSS while I was building StackDigest from a developer friend who described it as “inline styles but actually good.” That description made me skeptical, because everything I’d read about CSS had suggested that inline styles were bad practices. I shut down StackDigest before I had a chance to really overhaul the UX, but I decided to use Tailwind in my next project, which turned out to be Future Scan.

The difference was immediate. I was able to build exactly the UI I wanted without spending days building custom CSS and debugging conflicts. Instead of taking a week or two to build my MVP, I was able to do it in a couple days. I finally understood why people get evangelical about it. No more stylesheet files full of overrides. No more specificity battles. No more wondering which CSS file is responsible for that mysterious 16px of margin.

Now I use Tailwind for all my projects, including CarouselBot (my LinkedIn Carousel builder that is launching February 20) and all my Chrome extensions. The build quality is noticeably better, and an added bonus is that Claude Code produces dramatically better results with Tailwind than it ever did with Bootstrap.

Here’s a quick look at CarouselBot, which uses Tailwind for the UI and the carousels it builds:

A little more about Bootstrap and why it’s harder to customize

Bootstrap is a component-based CSS framework originally created at Twitter. It gives you pre-built, styled components—navbars, buttons, cards, modals, forms—that you drop into your HTML. The upside is that you can build a decent-looking page fast. The downside is that the moment you want to change how those components look or behave, you’re fighting the framework.

Bootstrap’s styles are deeply nested and highly specific. Overriding them requires either matching that specificity (which means long, fragile selectors) or using !important (which creates its own cascade of problems). Bootstrap also relies heavily on JavaScript for interactive components, and that JavaScript doesn’t always play nicely with custom scripts or modern frameworks like React and Vue.

For AI-assisted development, Bootstrap’s architecture creates a particular problem: the AI has to understand the relationship between multiple files (HTML, CSS overrides, JavaScript handlers) and predict how changes in one will cascade through the others. This is exactly the kind of multi-file reasoning that LLMs struggle with.

What is Tailwind CSS?

Tailwind takes the opposite approach from Bootstrap. Instead of pre-built components, it gives you a comprehensive set of utility classes, which are small, composable CSS classes that each do one thing. You style elements by combining these classes directly in your HTML markup.

This means your HTML becomes the single source of truth for both structure and styling. There’s no separate stylesheet to maintain, no class naming conventions to remember, and no specificity hierarchy to navigate. Everything is visible right there in the markup.

Tailwind also includes a build step that scans your files and generates a CSS file containing only the classes you actually use. This means your production CSS is tiny, often just a few kilobytes compared to Bootstrap’s 230KB+ bundle that includes every component whether you use it or not.

What does Tailwind syntax look like?

The best way to understand the difference is to see the same component built both ways. Here’s a simple card component:

Bootstrap approach (3 files)

HTML:

<div class=”card custom-card”>

<div class=”card-body”>

<h5 class=”card-title”>My Card</h5>

<p class=”card-text”>Some content here.</p>

<a href=”#” class=”btn btn-primary”>Learn More</a>

</div>

</div>

Custom CSS override file:

.custom-card {

border-radius: 12px;

box-shadow: 0 4px 6px rgba(0,0,0,0.1);

border: none;

}

.custom-card .card-title {

font-size: 1.25rem;

font-weight: 600;

}

.custom-card .btn-primary {

background-color: #6366f1;

border: none;

border-radius: 8px;

}

Tailwind approach (1 file)

<div class=”rounded-xl shadow-md p-6 bg-white”>

<h5 class=”text-xl font-semibold mb-2”>My Card</h5>

<p class=”text-gray-600 mb-4”>Some content here.</p>

<a href=”#” class=”bg-indigo-500 text-white px-4 py-2

rounded-lg hover:bg-indigo-600 transition”>

Learn More

</a>

</div>

Notice the difference. With Bootstrap, you’re writing HTML in one file, overriding styles in another, and the relationship between them is invisible. With Tailwind, every style decision is right there on the element. You can look at any element and immediately understand exactly how it’s styled.

Why Tailwind syntax is easier for LLMs like Claude to work with

Tailwind’s utility-first approach maps perfectly to how LLMs process and generate code. Here’s why:

1. Everything lives in one file.

With Bootstrap, the AI has to keep track of your HTML in one file, your CSS overrides in another, and maybe JavaScript in a third. It’s like asking someone to write a recipe where the ingredients are in the kitchen, the instructions are in the garage, and the oven temperature is written on a napkin somewhere. Things get lost. With Tailwind, all the styling information is right there on each HTML element. Claude can see exactly what it’s working with, in one place, with nothing hidden.

2. The naming system is predictable.

Tailwind’s class names follow simple, consistent patterns. For text size, there’s a logical scale: text-sm (small), text-base (normal), text-lg (large), text-xl (extra large). For colors, there’s a numbered shade system: bg-blue-100 is the lightest blue, bg-blue-500 is medium, bg-blue-900 is the darkest. The AI picks up on these patterns instantly and generates the right classes because the naming is intuitive and predictable.

3. No “ghost” styling problems.

This is the one that used to drive me crazy. With Bootstrap, the AI might write code that looks perfect in the file it’s editing, but something breaks because of a style rule hiding in a completely different file. It’s like a puzzle where pieces from a different box got mixed in. Tailwind eliminates this entirely. Every style is declared directly on the element, so what you see in the code is exactly what shows up on the screen. No surprises.

4. Mobile and desktop layouts are handled in the same line.

Making a website look good on both phones and laptops usually means writing separate layout rules for different screen sizes. With Bootstrap, those rules live in a stylesheet that the AI has to find and modify. With Tailwind, you just add prefixes right on the element. For example, w-full md:w-1/2 means “full width on phones, half width on medium screens and up.” The AI can write responsive layouts without jumping between files.

5. Small building blocks beat complex inheritance.

LLMs—the AI models powering tools like Claude Code—are much better at combining small, simple pieces than managing complex chains of inherited styles. Think of it like LEGO bricks versus a pre-assembled model kit. Tailwind’s tiny utility classes are the LEGO bricks: the AI can snap them together in any combination. Bootstrap’s pre-built components are the model kit: change one piece and the whole thing might not fit together anymore.

Try it yourself: a prompt for comparing the two

Want to see the difference firsthand? Here’s a prompt you can paste into Claude Code (or any AI coding tool) to compare the approaches side by side:

Prompt: Build a simple landing page with a hero section, a three-column feature grid, and a footer based on my personal website/LinkedIn page/other content source [INSERT LINK]. Build it twice: once using Bootstrap 5 with custom CSS overrides for a modern look, and once using Tailwind CSS. For each version, aim for a clean, professional design with a dark navy hero, white feature cards with subtle shadows, and a matching footer. After building both, explain which was easier to modify and why.

When I ran this prompt through Claude Code, using my personal website for starter content, both versions looked solid at first glance. And this is what I expected. Bootstrap and Tailwind will give you fairly comparable results up front. The initial pages looked nearly identical; the difference shows up when you start customizing.

This short video shows my results from this experiment:

Here’s how Claude explained the difference after building both:

Tailwind wins for modification speed. Here’s why:

Bootstrap (harder to customize): Bootstrap gives you structure fast (the grid, navbar collapse, responsive breakpoints are ready-made), but the moment you want a non-Bootstrap look, you’re fighting its defaults. The Bootstrap version needed ~200 lines of custom CSS to override component styles—navbar colors, button styles, card borders, hover effects. Every override requires understanding Bootstrap’s specificity (hence the !important on nav-link colors). Changing the hero gradient later means hunting through the <style> block, not the markup.

Tailwind (easier to customize): The Tailwind version has zero custom CSS (just one line for the font stack). Every visual decision—colors, spacing, shadows, hover states—lives directly on the element. Want to change the hero from navy to indigo? Change bg-navy to bg-indigo-900 right on the <section> tag. Want bigger card padding? Change p-8 to p-10. No context-switching between HTML and CSS, no specificity wars. The Tailwind file is also less than half the line count (162 vs 360).

The tradeoff: Bootstrap is faster for initial scaffolding if you’re happy with its default look (a navbar + grid is a few classes). Tailwind is faster for everything after that—customization, iteration, and unique designs. For a branded landing page like this where you want a distinct visual identity, Tailwind is the more practical choice.

That last point is key. If you’re building a quick internal tool and Bootstrap’s default look is fine, Bootstrap works great. But the moment you want your site to look like yours (e.g., your colors, your spacing, your personality) Tailwind makes that process dramatically easier for both you and the AI.

How to set up Tailwind CSS for your project

Here’s the step-by-step setup I use for every new project. If you’re using Claude Code, you can literally paste these steps into your prompt and the AI will handle the execution.

Mac or Windows? These steps work on both. The Node.js installer at nodejs.org auto-detects your operating system. All the npm and npx commands below are identical on Mac Terminal, Windows PowerShell, and the VS Code integrated terminal. The one difference: Step 2 uses the && operator to chain two commands, which works in Mac Terminal, Windows cmd, and PowerShell 7+. If you’re on older PowerShell (version 5), just run the two commands on separate lines. If you’re using Claude Code, don’t worry, the AI handles this automatically.

Step 1: Make sure Node.js is installed

Tailwind requires Node.js because it uses a build process to generate your CSS. If you don’t have Node installed, go to nodejs.org—it’ll show you the right download for your operating system (Mac, Windows, or Linux). Choose the LTS (Long Term Support) version. After installing, open your terminal and verify it worked:

node --version

npm --version

If both commands print a version number, you’re good.

Step 2: Initialize your project

Create a folder for your project and set it up for Node packages:

mkdir my-project

cd my-project

npm init -y

Note: On Mac, run these in Terminal. On Windows, use PowerShell, Command Prompt, or the terminal built into VS Code. All three work identically for these commands.

Step 3: Install Tailwind CSS

npm install -D tailwindcss

npx tailwindcss init

The first command downloads Tailwind into your project. The second creates a tailwind.config.js file—this is where you’ll tell Tailwind which files to scan for classes.

Step 4: Configure your template paths

Open tailwind.config.js in your text editor and replace its contents with:

module.exports = {

content: [”./src/**/*.{html,js,jsx,ts,tsx}”],

theme: { extend: {} },

plugins: [],

}

The content line tells Tailwind: “scan everything inside my src folder for Tailwind class names.” Tailwind uses this list to know which CSS to generate. If your HTML files live somewhere else (like a pages or templates folder), adjust the path accordingly.

Step 5: Add Tailwind directives to your CSS

Create a file called input.css inside a src folder (so the path is src/input.css) and add these three lines:

@tailwind base;

@tailwind components;

@tailwind utilities;

These aren’t actual CSS—they’re directives that tell Tailwind’s build process where to inject its generated styles. Think of them as placeholders that Tailwind will fill in.

Step 6: Build your CSS

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

This command takes your input.css file, processes it through Tailwind, and outputs a real CSS file at dist/output.css containing only the utility classes your project actually uses. The --watch flag keeps the process running so it automatically rebuilds every time you save a file. This is the step most people forget—more on that in the tips section.

Leave this terminal window running while you work. If you close it or restart your computer, you’ll need to run this command again.

Step 7: Link the output CSS in your HTML

In your HTML file, add a link to the generated CSS in the <head> section:

<link href=”./dist/output.css” rel=”stylesheet”>

That’s it. You’re ready to start using Tailwind classes in your markup.

Tips for getting the best results with Tailwind and AI tools

1. Avoid the CDN in production

Tailwind offers a CDN link for quick prototyping, and it’s tempting to use it—especially when you’re vibe coding and just want to see results fast. Don’t use it for anything you ship. The CDN version includes every single Tailwind utility class, which means you’re loading a massive CSS file.

The Node-based build process generates only the classes you actually use, which can shrink your CSS from megabytes to kilobytes. It also means the CDN version can’t tree-shake unused styles, and you lose access to custom configuration like brand colors and custom breakpoints.

Use the CDN for quick local tests. Use the build process for everything else.

2. Always use a style guide

This is the single most impactful tip I can give you. Before you start building, define a style guide that specifies your color palette, typography scale, spacing system, and component patterns. Then include it in your Claude Code project context or paste it at the start of your prompt.

Without a style guide, Claude will make reasonable but inconsistent choices—one component might use bg-blue-500, another bg-blue-600, and a third bg-indigo-500. With a style guide, every component uses your brand colors and spacing consistently.

3. Remember to recompile your stylesheet after changes

This confuses almost everyone who’s new to Tailwind, and it’s especially confusing when you’re working with AI tools.

Here’s what happens: Tailwind scans your HTML files and generates CSS only for the utility classes it finds. If you add a new class—say, bg-emerald-400—but you don’t rebuild the CSS, that class won’t exist in your stylesheet. Your page will render without the style, and you’ll spend twenty minutes wondering why your perfectly-written code isn’t working.

If you’re running the --watch command from the setup section, rebuilds happen automatically. But if Claude Code creates a new file or you restart your development environment, you may need to re-run the build command. When something doesn’t look right, the first thing to check is whether Tailwind has generated the CSS for your new classes.

Pro tip: Add npx tailwindcss -i ./src/input.css -o ./dist/output.css to your package.json scripts as “build:css” so you can run npm run build:css whenever you need a fresh compile.

4. Use a subagent for complex Tailwind work

If you’re using Claude Code, you can define specialized subagents that bring deep Tailwind expertise to specific tasks. A subagent is essentially a focused prompt that tells Claude to approach a task with particular expertise and constraints.

Here’s a simple subagent definition you could use with Claude or Cursor:

Subagent definition: You are a Tailwind CSS expert. When building or modifying UI components: (1) Use only Tailwind utility classes—never write custom CSS unless absolutely necessary. (2) Follow the project style guide for colors, spacing, and typography. (3) Ensure all components are responsive using Tailwind’s breakpoint prefixes (sm:, md:, lg:, xl:). (4) Use Tailwind’s built-in dark mode classes (dark:) where applicable. (5) After making changes, remind the user to recompile the Tailwind stylesheet if they’re not running --watch.

The bottom line

If you’re building web projects with AI tools doing most of the heavy lifting, your choice of CSS framework matters more than you think. Ideally, you want to choose the framework that your AI can work with most effectively.

Tailwind’s utility-first, single-file, composable approach is almost purpose-built for LLM-assisted development. It eliminates the multi-file reasoning, specificity debugging, and cascade management that trip up AI tools. Every project I’ve built with Tailwind has seen fewer bugs, faster iteration, and better-looking results that my early projects using Bootstrap with lots of custom CSS.

Give it a try on your next project. I think you’ll like it.

---

Live Workshop: Tailwind for vibe coding

Friday, February 13, 2026
3:00 PM US Central
COMPLETED

In this hands-on workshop, we walked through best practices for using Tailwind in vibe coding projects and how to get the best results. Material covered exactly how to set up Tailwind, build subagents, create a style guide, and handle common gotchas like forgotten CSS rebuilds.

Related resources include:

• Three templates (Creative Director subagent, Tailwind Syntax Expert subagent, and a “Fill in the Blank” Style Guide)

• The spec and code generated during the live build

• The full workshop recording to rewatch at your own pace

This workshop was created for paid subscribers to Wondering About AI.

Not a paid subscriber yet? Upgrade now to get access to the templates, recording, and all future premium content.

---

Wow, you’ve made it to the end! DM me if you have any questions, or drop a comment below with your own experience switching CSS frameworks. Also, there’s still time to try CarouselBot before it launches.