Tailwind CSS - Styling Without Writing CSS

Time to learn Tailwind CSS - the most popular CSS framework in 2024.

What is Tailwind CSS? 🎨

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

Traditional CSS:

1.button {
2  background-color: #dc2626;
3  color: white;
4  padding: 12px 24px;
5  border-radius: 8px;
6  font-weight: 600;
7}

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

Tailwind CSS:

1<button class="bg-red-600 text-white px-6 py-3 rounded-lg font-semibold">
2  Click me
3</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 - GitHub, Shopify, Netflix

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

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

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

  - full circle (50%)

Responsiveness - Breakpoints 📱

Tailwind has built-in breakpoints:

• sm:

  - 640px (portrait tablet)

• md:

  - 768px (landscape tablet)

• lg:

  - 1024px (laptop)

• xl:

  - 1280px (desktop)

Example:

1<div class="text-sm md:text-base lg:text-lg">
2  Responsive text
3</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.

Practical Example - Pirate Button 🏴‍☠️

1<button class="
2  bg-red-600
3  hover:bg-red-700
4  text-white
5  font-bold
6  py-3
7  px-6
8  rounded-lg
9  transition-colors
10  duration-200
11">
12  Join the crew!
13</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:

1Create 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 "Yes" during setup).

Configuration files:

• tailwind.config.ts

  - configuration (colors, fonts)

• app/globals.css

  - Tailwind directives

In

globals.css

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

This imports all Tailwind classes.

Dark Mode in Tailwind 🌙

Tailwind supports dark mode:

1<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
2  Auto dark mode!
3</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! 🚀