Tailwind CSS - Styling Without Writing CSS

Time to learn Tailwind CSS - one of the most popular CSS frameworks (create-next-app installs it by default).

What is Tailwind CSS?

Tailwind is a utility-first CSS framework. Instead of writing CSS manually, you use ready-made classes.

Traditional CSS:

.button {
  background-color: #dc2626;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
}

<button class="button">Click me</button>

Tailwind CSS:

<button class="bg-red-600 text-white px-6 py-3 rounded-lg font-semibold">
  Click me
</button>

Everything in HTML classes! You don't write CSS - you use ready-made classes.

Why Tailwind?

Speed - no switching between HTML and CSS Consistency - one system of colors, spacing Responsiveness - easy breakpoints (sm:, md:, lg:) No conflicts - no accidentally overriding styles Tree-shaking - only used classes in the final CSS Used by - OpenAI, Shopify, Reddit and NASA JPL, among others (list on tailwindcss.com)

Basic Tailwind Classes

1. Colors

Background:

• bg-red-500 - red background
• bg-blue-600 - blue background
• bg-black - black background
• bg-white - white background

Text:

• text-red-500 - red text
• text-blue-600 - blue text
• text-gray-900 - dark gray text

Colors have shades from 50 (lightest) to 950 (darkest).

2. Padding and Margin

Padding (inner spacing):

• p-4 - padding 16px on all sides
• px-4 - padding 16px left and right
• py-4 - padding 16px top and bottom
• pt-4 - padding-top 16px
• pr-4 - padding-right 16px

Margin (outer spacing):

• m-4 - margin 16px
• mx-auto - centering (margin left/right auto)
• mt-8 - margin-top 32px

Scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40...

• p-1 = 4px
• p-2 = 8px
• p-4 = 16px
• p-8 = 32px

See different paddings side by side and change the numbers in the classes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Padding</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
    <!-- Padding example -->
    <div class="bg-black text-white p-4">
        This is a div with black background, white text and 16px padding (p-4)
    </div>

    <div class="mt-4 bg-blue-600 text-white px-8 py-4">
        This div has horizontal padding 32px (px-8) and vertical 16px (py-4)
    </div>

    <div class="mt-4 bg-red-600 text-white p-0">
        This div has padding 0 (p-0)
    </div>

    <div class="mt-4 bg-green-600 text-white p-8">
        This div has padding 32px (p-8)
    </div>
</body>
</html>

3. Text

Size:

• text-xs - extra small
• text-sm - small
• text-base - normal (16px)
• text-lg - large
• text-xl - extra large
• text-2xl, text-3xl, text-4xl - larger

Weight:

• font-light - light
• font-normal - normal
• font-medium - medium
• font-semibold - semi-bold
• font-bold - bold

Alignment:

• text-left - left
• text-center - center
• text-right - right

4. Layout

Display:

• block - display: block
• inline - display: inline
• flex - display: flex
• grid - display: grid
• hidden - display: none

Flexbox:

• flex - activates flexbox
• flex-row - horizontal direction (default)
• flex-col - vertical direction
• items-center - vertical centering
• justify-center - horizontal centering
• gap-4 - gap between elements

This is what an element centered vertically and horizontally looks like (h-screen gives it the full screen height):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Flexbox</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <!-- Flexbox centered vertically and horizontally -->
    <div class="flex items-center justify-center h-screen bg-gradient-to-br from-blue-500 to-purple-600">
        <div class="bg-white p-8 rounded-lg shadow-2xl">
            <h1 class="text-3xl font-bold text-gray-800 mb-4">
                Centered element!
            </h1>
            <p class="text-gray-600">
                This div is centered vertically and horizontally thanks to:
            </p>
            <ul class="mt-4 space-y-2 text-sm text-gray-700">
                <li><code class="bg-gray-100 px-2 py-1 rounded">flex</code> - activates flexbox</li>
                <li><code class="bg-gray-100 px-2 py-1 rounded">items-center</code> - vertical centering</li>
                <li><code class="bg-gray-100 px-2 py-1 rounded">justify-center</code> - horizontal centering</li>
                <li><code class="bg-gray-100 px-2 py-1 rounded">h-screen</code> - height 100vh</li>
            </ul>
        </div>
    </div>
</body>
</html>

5. Width and Height

Width:

• w-full - width: 100%
• w-1/2 - width: 50%
• w-screen - width: 100vw
• max-w-md - max-width: 448px
• max-w-4xl - max-width: 896px

Height:

• h-screen - height: 100vh (full screen)
• min-h-screen - min-height: 100vh

6. Border and Radius

Border:

• border - border 1px
• border-2 - border 2px
• border-red-500 - red border

Radius (rounding):

• rounded - border-radius 4px
• rounded-lg - larger rounding
• rounded-full - maximum rounding: a pill, and a circle on a square

Responsiveness - Breakpoints

Tailwind has built-in breakpoints:

• sm: - from 640px
• md: - from 768px (e.g. a tablet in portrait)
• lg: - from 1024px (e.g. a tablet in landscape, a small laptop)
• xl: - from 1280px (laptop, monitor)
• 2xl: - from 1536px (large monitor)

Each prefix works from the given width up.

Example:

<div class="text-sm md:text-base lg:text-lg">
  Responsive text
</div>

• Mobile: text-sm (14px)
• Tablet: text-base (16px)
• Laptop: text-lg (18px)

Mobile-first: you write for mobile, then add breakpoints for larger screens.

Change the width of the preview and watch the number of columns and the text size change:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Responsiveness</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
    <h1 class="text-3xl font-bold mb-8 text-center">
        Responsiveness in Tailwind
    </h1>

    <!-- Mobile: 1 column, Tablet: 2 columns, Desktop: 3 columns -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-blue-500 text-white p-6 rounded-lg">
            <h2 class="text-xl font-bold mb-2">Card 1</h2>
            <p>Resize the window to see responsiveness!</p>
        </div>
        <div class="bg-purple-500 text-white p-6 rounded-lg">
            <h2 class="text-xl font-bold mb-2">Card 2</h2>
            <p>Mobile: 1 column<br>Tablet (md): 2 columns<br>Desktop (lg): 3 columns</p>
        </div>
        <div class="bg-pink-500 text-white p-6 rounded-lg">
            <h2 class="text-xl font-bold mb-2">Card 3</h2>
            <p>Breakpoints:<br>sm: 640px<br>md: 768px<br>lg: 1024px</p>
        </div>
    </div>

    <!-- Responsive text -->
    <div class="mt-8 bg-white p-6 rounded-lg shadow">
        <p class="text-sm md:text-base lg:text-lg xl:text-xl">
            This text has different sizes:<br>
            Mobile: text-sm (14px)<br>
            Tablet: text-base (16px)<br>
            Laptop: text-lg (18px)<br>
            Desktop: text-xl (20px)
        </p>
    </div>
</body>
</html>

Practical Example - Pirate Button

<button class="
  bg-red-600
  hover:bg-red-700
  text-white
  font-bold
  py-3
  px-6
  rounded-lg
  transition-colors
  duration-200
">
  Join the crew!
</button>

What's happening:

• bg-red-600 - red background
• hover:bg-red-700 - darker on hover
• text-white - white text
• font-bold - bold
• py-3 - padding top/bottom
• px-6 - padding left/right
• rounded-lg - rounded corners
• transition-colors - smooth color transition
• duration-200 - 200ms transition

Using AI for Tailwind

Instead of memorizing all classes, ask AI!

Prompt:

Create a pirate hero section in Tailwind with a black background, red heading and gold button

AI will generate the entire code with appropriate Tailwind classes!

Tailwind in Next.js

In Next.js, Tailwind is already configured if you chose the recommended defaults or Tailwind CSS when creating the project.

Configuration files:

• app/globals.css - imports Tailwind and sets the theme (the @theme block)
• postcss.config.mjs - connects the @tailwindcss/postcss plugin

At the top of globals.css you'll see:

@import "tailwindcss";

This single line imports all Tailwind classes. This is Tailwind 4 syntax: the old @tailwind base, @tailwind components and @tailwind utilities directives and the tailwind.config.ts file come from version 3 and are not in new projects.

Dark Mode in Tailwind

Tailwind supports dark mode:

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Auto dark mode!
</div>

Summary

Tailwind CSS - utility-first framework Classes in HTML - no manual CSS writing bg-, text-, p-, m- - basic classes sm:, md:, lg: - responsive breakpoints hover:, focus: - interactive states AI helps - ask for specific styles

In the next exercise we'll create a landing page for "Kraken's Call"!

See you there!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pirate Button</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 flex items-center justify-center h-screen">
    <div class="text-center">
        <h1 class="text-5xl font-bold text-white mb-8">
            Black Pearl of Code
        </h1>

        <!-- Pirate button with hover effect -->
        <button class="
            bg-red-600
            hover:bg-red-700
            text-white
            font-bold
            px-6
            py-3
            rounded-lg
            transition-colors
            duration-200
            shadow-lg
            hover:shadow-xl
            transform
            hover:scale-105
        ">
            Join the crew!
        </button>

        <div class="mt-8 max-w-md mx-auto">
            <p class="text-gray-400 text-sm">
                Hover over the button to see the hover effect!
            </p>
            <div class="mt-4 bg-gray-800 p-4 rounded text-left text-xs text-gray-300">
                <p class="font-mono">
                    bg-red-600 hover:bg-red-700<br>
                    text-white font-bold<br>
                    px-6 py-3 rounded-lg<br>
                    transition-colors duration-200<br>
                    shadow-lg hover:shadow-xl<br>
                    transform hover:scale-105
                </p>
            </div>
        </div>
    </div>
</body>
</html>