Tailwind CSS

What It Is

Tailwind CSS is a styling tool that lets you design a page by adding small class names right in your HTML. Instead of writing a big CSS file first, you build the look of the page with utility classes like bg-blue-600, text-white, and p-4.

Why We Use It

Tailwind is helpful for this course because it makes beginner Flask apps look cleaner faster. Students can keep their code in one place, make small design changes, and learn what spacing, color, and layout classes do without writing a huge <style> block.

Tailwind helps with:

Colors
Spacing
Fonts
Button styles
Layout
Responsive design

How To Add Tailwind To A Flask Page

For early Flask projects in this course, the easiest setup is the Tailwind CDN script.

Put this inside the <head> of your HTML:

<script src="https://cdn.tailwindcss.com"></script>

Example:

<html>
  <head>
    <title>My App</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-950 text-white min-h-screen">
    <h1 class="text-4xl font-bold text-cyan-400">My App</h1>
  </body>
</html>

If that script is missing, the classes will not work.

How Tailwind Works

Each class changes one small part of the design.

Examples:

bg-slate-950 = dark background color
text-white = white text
p-4 = padding
rounded-xl = rounded corners
text-2xl = larger text
font-bold = bold text
flex = use flexbox layout
grid = use grid layout

You can stack many classes on one element:

<button class="bg-violet-600 hover:bg-violet-700 text-white font-semibold px-4 py-2 rounded-lg">
  Click Me
</button>

That one line controls the button's color, hover color, text color, font weight, padding, and rounded corners.

Beginner Classes You Will Use A Lot

Layout

max-w-xl or max-w-3xl = limit width
mx-auto = center something horizontally
min-h-screen = make the page at least as tall as the screen
flex = flexible row or column layout
flex-col = stack items vertically
items-center = center items across
justify-center = center items along the main direction
gap-4 = space between items

Spacing

p-4 = padding on all sides
px-4 = left/right padding
py-2 = top/bottom padding
m-4 = margin
mt-6 = margin top
mb-4 = margin bottom

Text

text-sm = small text
text-lg = larger text
text-3xl = large heading
font-semibold = medium-bold
font-bold = bold
text-center = center the text

Color

bg-white = white background
bg-slate-900 = dark background
text-slate-800 = dark text
text-cyan-400 = bright cyan text
border-slate-300 = light border

Borders And Shape

rounded-md = small rounded corners
rounded-xl = larger rounded corners
border = add a border
shadow-lg = add a shadow

A Simple Card Example

<div class="max-w-xl mx-auto mt-10 bg-white rounded-xl shadow-lg p-6">
  <h1 class="text-3xl font-bold text-slate-900">Decision Helper</h1>
  <p class="mt-3 text-slate-600">Pick between your options and get a result.</p>
  <a class="inline-block mt-5 bg-violet-600 hover:bg-violet-700 text-white font-semibold px-4 py-2 rounded-lg" href="/decide">
    Start
  </a>
</div>

This gives you a centered card with spacing, rounded corners, a shadow, and a styled button without writing custom CSS.

Tailwind In This Course

The normal path for this course is:

Start with Flask routes in app.py
Return HTML strings so the connection between Python and the page is easy to see
Use Tailwind via CDN to make the pages look clean quickly
Move to templates later once the app has real structure

This means the first Flask version may not look as advanced as a v0 prototype right away, but it should still feel polished and readable.

Common Problems

Problem	What it usually means	Fix
Classes do nothing	Tailwind CDN script is missing	Add `<script src="https://cdn.tailwindcss.com"></script>` inside `<head>`
Old design is still showing	Browser or app did not refresh yet	Save the file, restart Flask if needed, and refresh the page
Page looks crowded	Not enough spacing classes	Add classes like `p-4`, `mt-4`, `gap-4`, or `max-w-xl mx-auto`
Hard to read text	Low contrast colors	Use darker text on light backgrounds or lighter text on dark backgrounds
Too many classes on one line	The element is doing too much	Split the page into smaller sections or move repeated HTML into templates later

Quick Reference

<script src="https://cdn.tailwindcss.com"></script>

<body class="bg-slate-950 text-white min-h-screen">
  <main class="max-w-3xl mx-auto p-6">
    <h1 class="text-4xl font-bold text-cyan-400">My App</h1>
    <p class="mt-3 text-slate-300">Built with Flask and Tailwind.</p>
    <a class="inline-block mt-6 bg-violet-600 hover:bg-violet-700 text-white px-4 py-2 rounded-lg" href="/">
      Home
    </a>
  </main>
</body>