Rain Lag

From Designs to Screens: A Beginner-Friendly Workflow for Responsive UIs with Tailwind CSS

Learn how to turn Figma designs into responsive, production-ready interfaces using Tailwind CSS—step by step, from layout structure to custom breakpoints and container queries.

Introduction

Modern interfaces don’t live on a single screen size. Your users will hit your app from phones, tablets, large monitors, and everything in between. That makes responsive UI a non‑negotiable skill—especially if you’re building web apps or marketing sites.

Tailwind CSS has become a favorite for this because of its utility‑first approach. Instead of writing custom CSS for every component, you apply small, composable classes directly in your HTML. This is particularly powerful when you’re translating a visual design (often from Figma) into a real, responsive layout.

In this post, you’ll walk through a beginner‑friendly workflow for going from static designs to responsive screens using Tailwind CSS. We’ll cover:

  • How to think about responsive UIs with Tailwind
  • Mapping Figma designs to Tailwind utilities
  • Using breakpoints for viewport‑based responsiveness
  • Using container queries in Tailwind CSS 4 for component‑aware layouts
  • A step‑by‑step process you can reuse on any project

Why Responsive UIs Matter

Responsive UI means your layout and components:

  • Look good on mobile, tablet, and desktop
  • Adapt to different widths (and sometimes heights)
  • Preserve usability: readable text, tappable buttons, usable navigation

If you design only for desktop and retrofit mobile later, you’ll often fight against your layout. Tailwind makes it easier to design mobile‑first, then progressively enhance for larger screens.

Two key ideas:

  1. Viewport responsiveness: Your styles change based on the browser window size (Tailwind’s breakpoints).
  2. Component responsiveness: A component changes based on the size of its parent container (Tailwind’s container queries in v4).

You’ll use both.

Why Tailwind Is Great for Design‑to‑Code

Tailwind’s utility‑first philosophy means you write HTML like this:

<button class="px-4 py-2 rounded-md bg-indigo-600 text-white text-sm md:text-base">
  Get started
</button>

Each class does one small thing:

  • px-4 py-2 → padding
  • rounded-md → border radius
  • bg-indigo-600 → background color
  • text-sm / md:text-base → font size that changes at the md breakpoint

Instead of jumping between HTML and CSS files, your layout, spacing, and typography live together. That’s a huge win when you’re following a design:

  • See spacing tokens in Figma → map to Tailwind’s spacing scale (4, 6, 8, etc.)
  • See font sizes and line heights → map to Tailwind’s typography utilities (text-sm, leading-relaxed, etc.)
  • See grids and columns → map to grid, grid-cols-2, lg:grid-cols-3, and more

With Tailwind, you can almost “speak” your design using classes.

Step 1: Prepare the Design (Figma Side)

Before you write a single line of HTML, make sure your design is structured in a Tailwind‑friendly way.

Focus on:

1. Clear spacing system

Instead of random spacing like 13px, 27px, 41px, aim for a consistent scale:

  • 4px, 8px, 12px, 16px, 24px, 32px, 48px, etc.

Tailwind’s default spacing scale is based on 4px steps (e.g., 1 = 0.25rem, commonly 4px). Try to align your design tokens with this, so:

  • 16px → p-4 or m-4
  • 24px → p-6
  • 32px → p-8

2. Typography scale

Define a small set of heading and body styles, for example:

  • H1: 32px, bold
  • H2: 24px, semi‑bold
  • Body: 16px, normal
  • Small: 14px, normal

These map neatly to Tailwind like:

  • text-3xl font-bold
  • text-2xl font-semibold
  • text-base
  • text-sm

3. Reusable components

Design recurring elements as components:

  • Buttons
  • Cards
  • Navigation items
  • Form fields

Each of these should have clear padding, radius, text size, and states. The cleaner the component in Figma, the easier it is to express as a set of Tailwind classes.

4. Basic responsive behavior

If possible, create mobile and desktop variants of key screens:

  • How does the hero layout change on mobile vs desktop?
  • Does the navigation collapse into a menu on small screens?
  • Do three cards become a vertical stack on mobile?

You’ll later translate those variants into Tailwind breakpoints.

Step 2: Build the Layout Skeleton in HTML

Start by writing bare HTML without any styling. Focus only on structure.

For example, a simple marketing page:

<body>
  <header>
    <nav>
      <div>Logo</div>
      <ul>
        <li>Features</li>
        <li>Pricing</li>
        <li>Contact</li>
      </ul>
      <button>Sign in</button>
    </nav>
  </header>

  <main>
    <section>
      <h1>Build responsive UIs faster</h1>
      <p>Turn your designs into production-ready interfaces with Tailwind CSS.</p>
      <button>Get started</button>
    </section>

    <section>
      <div>Card 1</div>
      <div>Card 2</div>
      <div>Card 3</div>
    </section>
  </main>
</body>

Think semantically: header, main, section, nav, ul, button. This “skeleton” is what you’ll decorate with Tailwind utilities.

Step 3: Apply Tailwind Utilities for Base (Mobile) Layout

Next, turn on Tailwind and style for mobile first.

You might end up with:

<body class="bg-slate-50 text-slate-900">
  <header class="border-b border-slate-200">
    <nav class="mx-auto max-w-5xl flex items-center justify-between px-4 py-3">
      <div class="text-lg font-semibold">Logo</div>
      <ul class="hidden gap-6 text-sm font-medium md:flex">
        <li><a href="#" class="hover:text-indigo-600">Features</a></li>
        <li><a href="#" class="hover:text-indigo-600">Pricing</a></li>
        <li><a href="#" class="hover:text-indigo-600">Contact</a></li>
      </ul>
      <button class="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white">
        Sign in
      </button>
    </nav>
  </header>

  <main class="mx-auto max-w-5xl px-4 py-10">
    <section class="space-y-4">
      <h1 class="text-3xl font-bold tracking-tight">Build responsive UIs faster</h1>
      <p class="text-slate-600">
        Turn your designs into production-ready interfaces with Tailwind CSS.
      </p>
      <button class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white">
        Get started
      </button>
    </section>

    <section class="mt-10 grid gap-4">
      <div class="rounded-lg bg-white p-4 shadow-sm">Card 1</div>
      <div class="rounded-lg bg-white p-4 shadow-sm">Card 2</div>
      <div class="rounded-lg bg-white p-4 shadow-sm">Card 3</div>
    </section>
  </main>
</body>

Notice everything is still single‑column and mobile‑friendly. Once this looks right in a small viewport, you’re ready to make it adapt to larger screens.

Step 4: Add Responsive Behavior with Tailwind Breakpoints

Tailwind uses mobile‑first breakpoints, applied with prefixes:

  • sm: – applies at min-width: 640px
  • md: – min-width: 768px
  • lg: – min-width: 1024px
  • xl: – min-width: 1280px

Example: md:grid-cols-3 means “from 768px and up, use 3 columns.”

Update the cards section:

<section class="mt-10 grid gap-4 md:grid-cols-3">
  <!-- Cards -->
</section>

Now on mobile you get a vertical stack; on tablets and desktops, three columns.

Custom breakpoints for fine‑grained control

If your design has specific widths (e.g., a layout change at 900px), you can define custom breakpoints in tailwind.config.js:

export default {
  theme: {
    extend: {
      screens: {
        'tablet': '900px',
        'desktop': '1200px',
      },
    },
  },
};

Then use them like:

<section class="grid gap-4 tablet:grid-cols-2 desktop:grid-cols-3">
  <!-- Cards -->
</section>

This lets you align Tailwind’s behavior exactly with the breakpoints defined in your Figma design.

Step 5: Use Container Queries (Tailwind CSS 4)

Viewport breakpoints are useful, but sometimes a component lives in different contexts:

  • Inside a narrow sidebar
  • Inside a full‑width content area

You may want the component to change layout depending on how much space its container has, not the entire viewport. This is where container queries in Tailwind CSS 4 shine.

Enabling container queries

You mark an element as a “container”, then style children based on the container’s size.

Example:

<section class="@container card-grid mt-10">
  <div class="grid gap-4 @lg:grid-cols-3">
    <!-- Cards -->
  </div>
</section>

Here’s what’s happening:

  • @container turns the section into a container context.
  • @lg:grid-cols-3 on the inner grid means: when the container (not viewport) reaches the lg size, use 3 columns.

This is powerful when the same component appears in different layouts:

  • In a narrow column, it might stay single‑column.
  • In a wide main area, it automatically switches to multiple columns.

Container queries help you build truly reusable, responsive components that aren’t tightly coupled to overall page breakpoints.

Step 6: Figma → Tailwind Tools (Helpful but Not Magic)

There are plugins and tools that can speed up your workflow:

  • Figma plugins that generate Tailwind classes from selected elements
  • Browser extensions that show Tailwind utility equivalents for DOM elements
  • Design systems built on Tailwind tokens

These are helpful, but they’re not a replacement for understanding Tailwind itself. You still need to:

  • Know the spacing, color, and typography scales
  • Understand how flexbox and grid utilities work
  • Be comfortable with responsive prefixes and container queries

Use tools to accelerate, not to avoid learning the core concepts.

A Repeatable Beginner Workflow

To summarize, here’s a simple workflow you can use on any project:

  1. Design cleanly in Figma

    • Use consistent spacing and typography scales
    • Define mobile + desktop variants for key screens
    • Build components (buttons, cards, navs) with clear structure

  2. Build a semantic HTML skeleton

    • Focus on structure and accessibility first
    • Ignore styling until the layout is logically sound

  3. Style the mobile base with Tailwind

    • Apply spacing, typography, and colors using utilities
    • Aim for a single‑column, scrollable, touch‑friendly layout

  4. Add responsive behavior with breakpoints

    • Use default breakpoints (sm, md, lg, xl) or define custom ones
    • Adjust grid columns, flex direction, font sizes, and spacing as needed

  5. Enhance components with container queries

    • Mark key wrappers as @container
    • Adjust component layouts based on container sizes

  6. Refine and iterate

    • Compare against Figma side‑by‑side
    • Tweak utilities until spacing and hierarchy match the design

Conclusion

Building responsive UIs can feel intimidating when you’re jumping between design tools, CSS, and different screen sizes. Tailwind CSS makes the process more approachable by giving you a visual, utility‑first way to implement what you see in your designs.

By designing with clear scales, structuring your HTML, and then layering Tailwind utilities—first for mobile, then for larger viewports and containers—you get a smooth path from designs to screens. With custom breakpoints and container queries in Tailwind CSS 4, you can craft interfaces that don’t just look good on “mobile and desktop,” but genuinely adapt to the spaces they live in.

Start with a single screen, follow the workflow in this post, and you’ll quickly build the muscle memory to turn any Figma design into a responsive Tailwind UI.

From Designs to Screens: A Beginner-Friendly Workflow for Responsive UIs with Tailwind CSS | Rain Lag