Tailwind Fundamentals

Tailwind is a utility-first CSS framework. Instead of writing custom CSS, you apply pre-defined classes directly to your HTML.

1. Typography & Colors

These classes handle how your text looks and what color it inherits from the theme palette.

Class	CSS Equivalent	Description
`text-center`	`text-align: center;`	Aligns text to the middle.
`text-lg`	`font-size: 1.125rem;`	Sets font size (usually 18px).
`font-mono`	`font-family: monospace;`	Uses a fixed-width font.
`text-cyan-400`	`color: var(--color-cyan-400);`	Applies a specific theme color.

2. The Box Model (Spacing & Sizing)

Tailwind uses a numeric scale (e.g., 1 = 0.25rem or 4px).

Padding (p): Space inside the border.
Margin (m): Space outside the border.
Directions: t (top), b (bottom), l (left), r (right), x (horizontal), y (vertical).

Code Example:

<div class="m-4 p-2 border-2 border-violet-600 rounded-md">
  Content with margin and padding
</div>

3. Layout: Flexbox

The flex utility is the most common way to align items in Tailwind.

flex: Turns the container into a flexbox.
justify-center: Aligns items horizontally (main axis).
items-center: Aligns items vertically (cross axis).

<div class="flex justify-center items-center h-20 bg-gray-100">
    <span>I am perfectly centered!</span>
</div>

4. Common Interaction States

These allow you to make your UI feel “alive” and responsive to the user.

Modifier	Trigger	Common Use Case
`hover:`	Mouse cursor over element	Changing button colors or lifting cards.
`active:`	While element is being clicked	Making a button look “pressed” (e.g., `scale-95`).
`focus:`	When selected (tabbed into)	Adding a bright border to input fields.
`group-hover:`	Hovering over a parent	Showing a hidden icon when the whole card is hovered.

<button class="bg-blue-500 hover:bg-blue-700 active:scale-95 transition-all px-4 py-2 text-white rounded">
  Click Me
</button>

🎬 Transitions & Animations

Transitions (Smooth Changes)

To prevent styles from “snapping” instantly, use transition classes.

transition-all: Tells Tailwind to animate all changing properties (color, size, etc.).
duration-300: Sets the speed (300ms).
ease-in-out: Makes the movement feel natural.

Built-in Animations

Tailwind includes four standard animations out of the box:

Class	Effect	Best For
`animate-spin`	Constant 360° rotation	Loading spinners/icons.
`animate-ping`	Growing/fading radar ring	Notification badges or “Live” indicators.
`animate-pulse`	Fading in and out	”Skeleton” loading screens.
`animate-bounce`	Jumping up and down	”Scroll down” arrows.

Code Example for a Loading Button:

<button class="flex items-center bg-indigo-600 p-3 text-white rounded-lg">
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24"></svg>
  Processing...
</button>

📱 Responsive Design (Breakpoints)

Tailwind uses a mobile-first approach. This means classes without a prefix apply to all screens, and prefixes like md:apply to anything larger than that size.

sm: (640px) — Tablets
md: (768px) — Small Laptops
lg: (1024px) — Desktops
xl: (1280px) — Large Monitors

Example Logic: class="w-full md:w-1/2" (Translation: Be 100% wide on mobile, but shrink to 50% wide once the screen hits Tablet/Laptop size.)

External Brain

Explorer