Getting Started with Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows you to rapidly build modern websites without ever leaving your HTML. Instead of writing custom CSS, you use utility classes to style your elements directly in your markup.

If you've ever written a .btn-primary class in a separate CSS file, then jumped back and forth between files just to tweak padding—Tailwind gets rid of that entirely. You style as you build.

Why Use Tailwind CSS?

• Productivity: Quickly prototype and build responsive designs without switching files.
• Consistency: Enforces a consistent design system across your project (spacing, colors, and sizes come from a shared scale, not made up on the fly).
• Customization: Easily customize your design with configuration files.
• No More Naming Classes: No need to come up with unique class names for every style—no more .wrapper-inner-2 moments.
• Smaller CSS in production: Tailwind only ships the classes you actually use, so your final CSS bundle stays lean.

Installation

To install Tailwind CSS in your project, run:

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

This will create tailwind.config.js and postcss.config.js files in your project.

If you're starting a brand new project, tools like Next.js, Vite, and Astro let you enable Tailwind directly during setup—no manual config needed. I'd recommend that route if you're not adding Tailwind to an existing project.

Basic Usage

Add Tailwind's directives to your CSS file:

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

Now you can use Tailwind's utility classes in your HTML or JSX:

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click Me
</button>

Read that class list left to right and it basically explains itself: blue background, darker blue on hover, white bold text, some padding, rounded corners. That's the whole appeal—once you learn the naming pattern, you can style almost anything without opening a CSS file.

Understanding the Utility Naming Pattern

Most Tailwind classes follow the same shape: property-value.

text-white     <!-- text color: white -->
bg-blue-500    <!-- background color: blue, shade 500 -->
p-4            <!-- padding: 1rem on all sides -->
mt-2           <!-- margin-top: 0.5rem -->
rounded-lg     <!-- border-radius: large -->

Once this clicks, you can usually guess a class before you even look it up. That's the biggest productivity win in my experience—less time in the docs, more time building.

Customization

Tailwind is highly customizable. You can edit the tailwind.config.js file to add custom colors, fonts, breakpoints, and more.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#1E40AF",
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
    },
  },
};

Now bg-brand and font-sans are available as classes throughout your project—matching your actual design system instead of Tailwind's defaults.

Responsive Design

Tailwind makes responsive design easy with mobile-first breakpoints:

<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Content -->
</div>

This one's simple but easy to misread at first: styles apply mobile-first, meaning w-full is the default (on small screens), and each breakpoint prefix (md:, lg:) only kicks in above that screen size. You're not writing separate mobile/desktop styles—you're layering on overrides as the screen gets bigger.

Layout with Flexbox and Grid

You'll use these two constantly, so they're worth calling out separately.

<!-- Flexbox -->
<div class="flex items-center justify-between gap-4">
  <span>Left</span>
  <span>Right</span>
</div>
 
<!-- Grid -->
<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

• flex turns on flexbox, items-center vertically centers, justify-between spreads children apart, gap-4 adds spacing between them without needing margins.
• grid-cols-3 splits the container into 3 equal columns—no need to calculate percentages yourself.

I probably reach for flex items-center justify-between more than any other combo in this list. It's the backbone of most navbars and card headers.

States: Hover, Focus, and More

You already saw hover: earlier, but Tailwind gives you a prefix for almost every interactive state:

<input class="border focus:border-blue-500 focus:outline-none" />
<button class="bg-blue-500 active:bg-blue-800 disabled:opacity-50" disabled>
  Submit
</button>

You can stack these with responsive prefixes too, like md:hover:bg-blue-700—apply this hover style, but only on medium screens and up.

Dark Mode

Tailwind has built-in dark mode support. Enable it in your config:

// tailwind.config.js
module.exports = {
  darkMode: "class", // or "media" to follow the OS setting
  // ...
};

Then use the dark: prefix anywhere:

<div class="bg-white text-black dark:bg-zinc-900 dark:text-white">
  Adapts automatically
</div>

With darkMode: "class", you toggle dark mode by adding/removing a dark class on your <html> tag (usually via a theme toggle button in your app). With "media", it just follows the user's OS-level dark mode setting automatically—no toggle needed, but also no manual override.

Arbitrary Values (Escape Hatch)

Sometimes the design spec calls for something outside Tailwind's default scale—like an oddly specific pixel value. Square brackets let you drop in any value directly:

<div class="top-[117px] w-[calc(100%-4rem)] bg-[#1DA1F2]">
  <!-- Custom values, no config file needed -->
</div>

I don't reach for this often—if I'm using arbitrary values everywhere, that's usually a sign I should just add it to my config instead. But for one-off cases, it's a nice escape hatch instead of writing a separate CSS file for a single rule.

Don't Forget the content Config

This one bit me early on: Tailwind scans your files to figure out which classes you're actually using, so it can leave everything else out of the final CSS. If your files aren't listed in the content array, your styles just silently won't show up in production.

// tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  // ...
};

If you ever see your Tailwind classes working in dev but missing after you build/deploy, this is the first place to check.

A Few Tips I Wish I Knew Earlier

• Install the Tailwind IntelliSense extension if you're using VS Code—autocomplete and hover previews make a huge difference.
• Don't fight long class lists. If a component's className is getting unreadable, extract it into a component instead of trying to shorten the classes.
• @apply exists, but use it sparingly—reaching for it too often defeats the point of utility classes. It's best saved for a handful of truly repeated patterns.

Conclusion

Tailwind CSS is a powerful tool for building modern, responsive websites quickly and efficiently. Its utility-first approach can speed up your workflow and help maintain a consistent design system. Give it a try in your next project!