Tailwind CSS Guide: Utility-First Frontend

Why Tailwind CSS Changed Frontend Development

For over a decade, the standard approach to CSS was: write semantic class names, create separate stylesheets, and keep your HTML "clean." Bootstrap popularized component-based CSS with pre-built classes like .btn-primary and .card. Both approaches have real drawbacks that become painful at scale.

With semantic CSS, you spend significant time naming things. You create classes like .hero-section-title and .sidebar-navigation-link-active. Your CSS file grows endlessly because every new element needs new styles. Dead CSS accumulates because nobody is confident about what is safe to delete. Refactoring becomes risky because changing a CSS rule might break pages you did not test.

With Bootstrap, you get pre-built components that all look the same. Customizing beyond the provided themes requires overriding Bootstrap's styles with higher-specificity selectors, which creates a tangled mess. Your site looks like every other Bootstrap site unless you invest significant effort in customization.

Tailwind CSS takes a fundamentally different approach: utility-first. Instead of pre-built components, it gives you low-level utility classes that map directly to CSS properties. You compose these utilities directly in your HTML to build any design without writing custom CSS.

What Utility-First CSS Means

In utility-first CSS, each class does exactly one thing:

p-4 adds padding of 1rem on all sides.
text-lg sets font size to 1.125rem.
bg-blue-500 sets the background color to a specific shade of blue.
rounded-lg adds border-radius of 0.5rem.
flex sets display to flex.
items-center sets align-items to center.

A button that would be class="btn btn-primary" in Bootstrap becomes something like:

<button class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors">
  Contact Us
</button>

The first reaction from most developers is "that's ugly" or "that's too many classes." This reaction is normal and it fades within a day or two of actually building with Tailwind. Here is why.

Why It Works Better Than You Think

You never leave your HTML. No switching between HTML and CSS files. No inventing class names. No wondering where the style for a specific element is defined.
Changes are local. Changing the padding on one button does not affect any other button. There is no cascade to worry about.
Dead code is visible. When you delete a component, the styles go with it. No orphaned CSS rules accumulating over time.
Consistent design. Tailwind's spacing, color, and typography scales enforce consistency. You pick from a predefined set of values rather than inventing arbitrary pixel values.
Responsive design is inline. Instead of writing media queries in CSS, you prefix utilities: md:flex, lg:grid-cols-3, xl:text-xl.

Why Tailwind Replaced Bootstrap in Modern Projects

Bootstrap dominated frontend development from 2012 to roughly 2020. It solved a real problem: building consistent, responsive UIs without writing CSS from scratch. But as projects matured, Bootstrap's limitations became clear.

The Customization Problem

Bootstrap gives you pre-built components: buttons, cards, navbars, modals. These work well for prototypes and admin panels. But when a designer hands you a custom design (which is the case for any brand-conscious business website), you spend more time overriding Bootstrap than building from scratch.

Tailwind has no pre-built components. It gives you the building blocks. You create exactly the design your designer envisioned without fighting against framework defaults.

The File Size Problem

Bootstrap's full CSS is approximately 230 KB minified. Even if you use only 10% of its features, the browser downloads the full file (unless you set up a custom build). Tailwind, with its PurgeCSS integration, ships only the classes you actually use. A typical Tailwind production build is 5-15 KB gzipped.

The Design System Problem

Bootstrap has its own design system. Your site either looks like Bootstrap, or you spend significant effort overriding it. Tailwind starts with no visual opinion. Its default configuration provides a sensible design system (spacing scale, color palette, typography), but everything is customizable in tailwind.config.js without writing a single override.

Setup and Configuration

Installation

For a new project with a modern build tool (Vite, Astro, Next.js):

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

This creates a tailwind.config.js file and a postcss.config.js file.

Configuration File

The tailwind.config.js file is where you customize everything: colors, spacing, fonts, breakpoints, and more. A typical business project configuration:

module.exports = {
  content: ['./src/**/*.{astro,html,js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
        }
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      }
    }
  },
  plugins: [],
}

The content array tells Tailwind which files to scan for class names. This is how PurgeCSS knows which utilities to keep in the final build.

Base CSS File

Add Tailwind's directives to your main CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

That is the entire CSS file. Tailwind generates everything else.

Responsive Design with Tailwind Breakpoints

Tailwind uses a mobile-first approach. Unprefixed utilities apply to all screen sizes. Prefixed utilities apply at that breakpoint and above.

Default breakpoints:

Prefix	Minimum Width	CSS
sm:	640px	@media (min-width: 640px)
md:	768px	@media (min-width: 768px)
lg:	1024px	@media (min-width: 1024px)
xl:	1280px	@media (min-width: 1280px)
2xl:	1536px	@media (min-width: 1536px)

Practical Example

A grid that is 1 column on mobile, 2 columns on tablet, and 3 columns on desktop:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- cards here -->
</div>

No media queries to write. No separate mobile stylesheet. The responsive behavior is right there in the HTML, easy to read and modify.

Dark Mode Implementation

Tailwind supports dark mode out of the box with the dark: prefix.

Strategy: Class-Based (Recommended)

In tailwind.config.js:

module.exports = {
  darkMode: 'class',
  // ...
}

Then toggle a dark class on the HTML element using JavaScript. This gives you full control over when dark mode activates.

Usage

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Title</h2>
  <p class="text-gray-600 dark:text-gray-400">Description text</p>
</div>

Every element specifies both its light and dark appearance. This might seem verbose, but it means you can see exactly how every element looks in both modes without switching between files or searching through CSS.

Respecting System Preferences

You can detect the user's system preference with JavaScript and apply the dark class accordingly. Most implementations store the user's choice in localStorage so it persists across visits.

Component Patterns and Reuse

The biggest concern with utility-first CSS is code duplication. If you have 20 buttons on your site, do you copy the same 10 classes to each one?

Approach 1: Framework Components (Recommended)

If you use React, Vue, Svelte, or Astro, create a component:

// Button.tsx
export function Button({ children, variant = 'primary' }) {
  const base = 'px-6 py-3 rounded-lg font-semibold transition-colors';
  const variants = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
  };
  return <button class={`${base} ${variants[variant]}`}>{children}</button>;
}

Now every button uses <Button variant="primary">. The Tailwind classes are defined once in the component.

Approach 2: @apply Directive

Tailwind provides @apply to extract utility patterns into CSS classes:

.btn-primary {
  @apply bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors;
}

This works, but the Tailwind team (and experienced users) generally recommend against overusing @apply. It re-introduces the problems utility-first CSS was designed to solve: naming things, separating styles from markup, and managing CSS files.

Use @apply sparingly, primarily for base styles that genuinely need to be applied globally (like typography styles for content from a CMS).

Approach 3: Multi-Cursor Editing

For simple cases where you have a few similar elements on one page, modern code editors (VS Code, etc.) let you select multiple instances and edit them simultaneously. This is often faster than creating an abstraction.

Performance: PurgeCSS and Tree-Shaking

Tailwind generates thousands of utility classes. Without optimization, the development CSS file is over 3 MB. This is why PurgeCSS is built into Tailwind's production build process.

How It Works

You configure the content array in tailwind.config.js to point to all your template files.
During the production build, Tailwind scans these files for class names.
Any class name not found in your templates is removed from the final CSS.
The result is a CSS file containing only the utilities you actually use.

Typical File Sizes

Framework	Full CSS (minified)	Typical Production Build (gzipped)
Bootstrap 5	230 KB	40-50 KB (full) or 15-25 KB (custom build)
Tailwind CSS	3+ MB (dev)	5-15 KB (after PurgeCSS)
Vanilla CSS (typical project)	Varies	10-50 KB (often with dead code)

Tailwind's production build is typically smaller than a custom Bootstrap build and contains zero dead code. For sites where performance matters (and it always matters for SEO), this is a significant advantage.

Important: Do Not Construct Class Names Dynamically

PurgeCSS works by scanning your files as plain text. It looks for complete class name strings. If you construct class names dynamically (e.g., `text-${color}-500`), PurgeCSS cannot find them and will remove them. Always use complete class names:

// Wrong: PurgeCSS will not find these
const color = isActive ? 'blue' : 'gray';
className={`text-${color}-500`}

// Correct: PurgeCSS can find both complete class names
className={isActive ? 'text-blue-500' : 'text-gray-500'}

Tailwind vs Bootstrap vs Vanilla CSS: Comparison

Criteria	Tailwind CSS	Bootstrap 5	Vanilla CSS
Approach	Utility-first	Component-first	Custom
Learning curve	Medium (learn utilities)	Low (learn components)	Low to high (depends on skill)
Customization	Fully customizable	Limited without overrides	Fully custom
Design consistency	Enforced by design tokens	Enforced by components	Up to developer discipline
Production CSS size	5-15 KB	40-230 KB	Varies (often large with dead code)
Pre-built components	None (use Headless UI, daisyUI)	Full component library	None
JavaScript included	None	Yes (for dropdowns, modals, etc.)	None
Responsive design	Inline prefixes (md:, lg:)	Grid classes (col-md-6)	Media queries
Dark mode	Built-in (dark: prefix)	Manual	Manual
Best for	Custom designs, component frameworks	Prototypes, admin panels	Small projects, learning

When to Choose Bootstrap

Bootstrap still makes sense when you need a quick prototype, an admin dashboard, or an internal tool where visual uniqueness does not matter. The pre-built components save time when design is not a priority.

When to Choose Tailwind

Choose Tailwind for any project where design matters: business websites, marketing pages, SaaS products, e-commerce storefronts. Tailwind gives you total control over the visual design without the overhead of managing custom CSS files.

When to Choose Vanilla CSS

Vanilla CSS (possibly with CSS custom properties and modern features like CSS Grid and Container Queries) works well for small, simple projects or when you want zero dependencies. The trade-off is that you need strong CSS knowledge and discipline to maintain consistency.

Common Patterns: Cards, Navbars, Forms, Grids

Card Pattern

<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
  <img class="w-full h-48 object-cover" src="/image.jpg" alt="Description" />
  <div class="p-6">
    <h3 class="text-xl font-bold text-gray-900 mb-2">Card Title</h3>
    <p class="text-gray-600">Card description goes here.</p>
  </div>
</div>

Navigation Bar

<nav class="bg-white shadow-sm sticky top-0 z-50">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <a href="/" class="text-xl font-bold text-gray-900">Logo</a>
      <div class="hidden md:flex space-x-8">
        <a href="/services" class="text-gray-600 hover:text-gray-900">Services</a>
        <a href="/about" class="text-gray-600 hover:text-gray-900">About</a>
        <a href="/contact" class="bg-blue-600 text-white px-4 py-2 rounded-lg">Contact</a>
      </div>
    </div>
  </div>
</nav>

Form Pattern

<form class="space-y-6 max-w-lg">
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
    <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
  </div>
  <div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
    <textarea class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" rows="4"></textarea>
  </div>
  <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700">Send</button>
</form>

Responsive Grid

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <!-- grid items -->
</div>

Customizing the Design System

Tailwind's configuration file is where you define your project's design system. Here is what you can customize:

Colors

Add your brand colors to the theme. Tailwind generates all the utility classes automatically:

theme: {
  extend: {
    colors: {
      brand: {
        light: '#e0f2fe',
        DEFAULT: '#0ea5e9',
        dark: '#0369a1',
      }
    }
  }
}

Now bg-brand, text-brand-dark, border-brand-light all work automatically.

Typography

Define your font stack and add the @tailwindcss/typography plugin for styling prose content (blog articles, CMS content):

npm install -D @tailwindcss/typography

Then use the prose class on content containers. It styles headings, paragraphs, lists, links, and code blocks with sensible defaults. This is particularly useful for content from a headless CMS where you do not control the HTML structure.

Spacing Scale

Tailwind's default spacing scale uses a consistent 0.25rem increment. You can extend it with custom values for specific needs.

Tailwind with Frameworks: React, Vue, Astro

Tailwind + React

Tailwind works natively with React. Use className instead of class. For conditional classes, use the clsx or classnames library:

import clsx from 'clsx';

function Button({ variant, children }) {
  return (
    <button className={clsx(
      'px-6 py-3 rounded-lg font-semibold',
      variant === 'primary' && 'bg-blue-600 text-white',
      variant === 'secondary' && 'bg-gray-200 text-gray-800',
    )}>
      {children}
    </button>
  );
}

Tailwind + Vue

Tailwind integrates seamlessly with Vue. Use classes directly in templates. For conditional classes, Vue's built-in class binding works well:

<button :class="[
  'px-6 py-3 rounded-lg font-semibold',
  variant === 'primary' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-800'
]">
  <slot />
</button>

Tailwind + Astro

Astro has first-class Tailwind support. One command sets everything up:

npx astro add tailwind

This installs Tailwind, creates the configuration files, and configures the PostCSS pipeline. Tailwind classes work in .astro files, and in any React, Vue, or Svelte components used within the Astro project. We use this combination for most sites we build at Envestis. For more on the Astro framework, see our detailed Astro framework guide.

The Tailwind Ecosystem

Tailwind UI

Tailwind UI is a paid collection of professionally designed, responsive components. It is made by the Tailwind team and includes hundreds of components across categories (marketing, application UI, e-commerce). If you build websites for a living, it is a good investment.

Headless UI

A free, open-source collection of unstyled, accessible UI components (dropdowns, modals, tabs, etc.) designed to work with Tailwind. Made by the Tailwind team.

daisyUI

A popular component library that adds Bootstrap-like component classes on top of Tailwind. You get the convenience of class="btn btn-primary" while keeping Tailwind's utility classes for customization.

Tailwind CSS IntelliSense

The official VS Code extension provides autocomplete, syntax highlighting, and documentation for Tailwind classes. Install this before writing any Tailwind code. It makes discovering and using utility classes dramatically easier.

Common Concerns and Honest Answers

"The HTML is too verbose"

Yes, individual elements have more classes. But you write less CSS overall, your styles are always where you expect them (in the HTML), and dead CSS is eliminated. In practice, the verbosity of HTML is a small price for the maintainability gains.

"Separation of concerns"

The traditional separation of HTML (structure) and CSS (style) made sense when CSS was global. With component-based architectures (React, Vue, Astro), styles are already scoped to components. Tailwind takes this further by colocating styles with markup. This is a feature, not a problem.

"It's hard to learn"

If you know CSS, you already know Tailwind. Every utility class maps to a CSS property. p-4 is padding: 1rem. flex is display: flex. The learning curve is mostly memorizing the naming convention, which happens naturally within a few days of use.

Next Steps

Tailwind CSS is the foundation of the frontend stack we use at Envestis in Lugano for building business websites across Switzerland. Combined with Astro for the framework and Cloudflare Pages for hosting, it gives us a setup that produces fast, maintainable, professionally designed websites.

If you are starting a new project and want a modern frontend foundation, Tailwind is the right starting point. If you need help building a website with Tailwind CSS or want to modernize an existing site, get in touch. We can help you move from Bootstrap or custom CSS to a Tailwind-based setup that is easier to maintain and performs better.