Installation and Your First Tailwind Styles

Choose a setup path, understand source detection, and build a first page with utilities.

Playground vs. project installation

A browser playground is ideal for learning because it removes build setup from the first lesson. A real application should use the official integration for its toolchain—such as Vite, a framework integration, or the Tailwind CLI—so generated CSS is part of the normal build process.

In a modern v4 CSS entry point, the common starting point is:

@import "tailwindcss";

The exact package installation and plugin wiring depend on the environment. Follow the official installation page for the framework you use rather than combining commands from unrelated guides.

CSS entry point (Tailwind v4)

Playground

@import "tailwindcss";

/* Add project-specific CSS below when needed. */

💡 This imports Tailwind's CSS entry point. The build integration discovers utility classes in your source and emits the CSS required by those classes. This is a v4-style entry point; older v3 projects commonly use three @tailwind directives.

Key Takeaways

Use a playground for experiments and a build integration for real apps.
Use the official setup guide for your framework and Tailwind version.
Keep custom global CSS small and intentional.

Source detection and generated CSS

Tailwind does not need a handwritten CSS rule for every utility. It scans eligible source files for class tokens and generates CSS for the utilities it recognizes. This is why production builds can remain compact: unused utility classes are not generally emitted just because they exist in the framework.

A common mistake is constructing a class name dynamically:

const className = `bg-${color}-600`;

The complete class may not exist as a literal in the source, so source detection may not generate it. Prefer mapping application states to complete class strings:

const colors = { success: "bg-green-600", danger: "bg-red-600" };

This is also safer because only explicitly supported variants can be selected.

Avoid arbitrary runtime fragments

Do not assume Tailwind can infer every class produced by string concatenation. Keep class candidates statically visible or configure a supported source/safelist mechanism for your version.

Use complete class names

const statusClasses = {
  success: "bg-green-600 text-white",
  warning: "bg-amber-300 text-amber-950",
  danger: "bg-red-600 text-white",
};

export function StatusBadge({ status, children }) {
  const classes = statusClasses[status] ?? "bg-slate-200 text-slate-900";
  return <span className={`inline-flex rounded-full px-3 py-1 text-sm ${classes}`}>
    {children}
  </span>;
}

💡 Each possible utility appears as a complete string in the source. Tailwind can detect these candidates. The fallback also protects the UI when an unexpected status value arrives. In TypeScript, define status as a union such as "success" | "warning" | "danger" for stronger guarantees.

Knowledge Check

Why can `bg-${color}-600` fail in a production build?

Build a first responsive page

Start with structure, then spacing, then typography, then color. This order makes layout bugs easier to diagnose. Utilities are deliberately composable: mx-auto max-w-5xl px-4 centers a container, constrains its width, and adds horizontal padding.

The sample below uses a mobile-first layout. The base classes apply at every width; sm:, md:, and other breakpoint prefixes override or add behavior at and above their breakpoint.

A first Tailwind page

<div class="min-h-screen bg-slate-50 text-slate-900">
  <header class="border-b border-slate-200 bg-white">
    <div class="mx-auto flex max-w-5xl items-center justify-between px-4 py-4">
      <a class="text-lg font-bold tracking-tight" href="/">TaskFlow</a>
      <a class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600" href="#tasks">
        View tasks
      </a>
    </div>
  </header>
  <main class="mx-auto max-w-5xl px-4 py-10">
    <p class="text-sm font-semibold uppercase tracking-wider text-blue-700">Your workspace</p>
    <h1 class="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">Make progress visible.</h1>
    <p class="mt-4 max-w-2xl text-base leading-7 text-slate-600">
      Organize work, focus on the next action, and celebrate completed tasks.
    </p>
  </main>
</div>

💡 min-h-screen establishes a viewport-height canvas. max-w-5xl mx-auto creates a centered content column. px-4 protects content from touching small screen edges. Typography utilities set hierarchy and readability. hover: and focus-visible: provide pointer and keyboard interaction feedback.

Key Takeaways

Build layout before adding decorative details.
Use a centered max-width container for readable page content.
Include visible keyboard focus styles for interactive controls.

Playground vs. project installation

Source detection and generated CSS

Build a first responsive page

STAY UPDATED WITH BYTES!