> Source URL: /resources/tailwind.resource
# 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:

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

Example:

```html
<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:

```html
<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

```html
<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:

1. Start with Flask routes in `app.py`
2. Return HTML strings so the connection between Python and the page is easy to see
3. Use Tailwind via CDN to make the pages look clean quickly
4. 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

```html
<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>
```

---

## Official Links

- [Tailwind CSS Docs](https://tailwindcss.com/docs)
- [Tailwind CSS Playground](https://play.tailwindcss.com/)
- [Tailwind CSS Colors](https://tailwindcss.com/docs/colors)


---

## Backlinks

The following sources link to this document:

- [Tailwind CSS](/resources/index.resources.llm.md)
- [Tailwind CSS](/users/annie-h/week-5.path.llm.md)
- [Tailwind CSS](/users/charlie-m/week-5.path.llm.md)
- [Tailwind CSS](/users/emily-kate-s/week-5.path.llm.md)
- [Tailwind CSS](/users/josiah-c/week-5.path.llm.md)
- [Tailwind CSS](/users/john-p/week-5.path.llm.md)
- [Tailwind CSS](/users/jake-f/week-5.path.llm.md)
- [Tailwind CSS](/users/annie-h/week-4.path.llm.md)
- [Tailwind CSS](/users/charlie-m/week-4.path.llm.md)
- [Tailwind CSS](/users/elizabeth-b/week-4.path.llm.md)
- [Tailwind CSS](/users/josiah-c/week-4.path.llm.md)
- [Tailwind CSS](/users/emily-kate-s/week-4.path.llm.md)
- [Tailwind CSS](/users/john-p/week-4.path.llm.md)
- [Tailwind CSS](/users/jake-f/week-4.path.llm.md)
