Tailwind Core Concepts and Utilities

Tailwind utilities - CSS Frameworks

Introduction

In this lesson, we will explore the fundamental utilities that Tailwind CSS provides to help you structure and style your web pages.

Tailwind’s utility-first approach allows you to create flexible layouts, control spacing, apply typography, and add visual effects with minimal effort — all by using simple, predefined classes in your HTML.

Layout Utilities

Tailwind makes creating flexible, responsive layouts simple. We’ll look at three key layout systems: Flexbox, Grid, and Spacing/Sizing.

Flexbox Basics

Flexbox is used for creating flexible layouts, where items can adjust in size and position automatically based on available space. Tailwind provides simple utility classes for flex layouts.

Key Classes:

  • flex - Makes the parent a flex container.
  • justify-<value> - Controls how items are aligned horizontally.
  • items-<value> - Controls how items are aligned vertically.
html 
	<div class="flex justify-center items-center h-64 bg-gray-200">
	  <div class="bg-blue-500 text-white p-4">Centered Box</div>
	</div>

In this example:

  • flex makes the container a flexbox.
  • justify-center centers the box horizontally.
  • items-center centers the box vertically.
  • h-64 gives the container a height of 16rem (64 × 0.25rem).

Grid System

Tailwind’s grid system is a great tool for creating complex layouts with rows and columns.

Key Classes:

  • grid - Makes the container a grid.
  • grid-cols-<number> - Defines the number of columns.
  • gap-<size> - Defines the spacing between grid items.
html 
	<div class="grid grid-cols-3 gap-4">
	  <div class="bg-red-500 p-4">1</div>
	  <div class="bg-green-500 p-4">2</div>
	  <div class="bg-blue-500 p-4">3</div>
	</div>

In this example:

  • grid-cols-3 creates a grid with 3 equal columns.
  • gap-4 sets a gap of 1rem between the grid items.

Spacing and Sizing

Tailwind makes it easy to control spacing and sizing with classes for margins, paddings, widths, and heights.

Key Classes:

  • m-<size> - Sets margin. m-4 applies 1rem margin on all sides.
  • p-<size> - Sets padding. p-4 applies 1rem padding on all sides.
  • w-<size> - Controls width. w-full makes an element take 100% width.
  • h-<size> - Controls height. h-32 makes an element 8rem tall.
html 
	<div class="w-1/2 p-8 bg-yellow-300">
	  This div takes up half the width and has 2rem padding.
	</div>

Typography and Colors

Tailwind provides utilities to format text, apply colours, and manage font settings.

Text Formatting

Key Classes:

  • text-<size> - Sets text size (e.g., text-lg, text-2xl).
  • font-<weight> - Sets font weight (e.g., font-bold, font-light).
  • text-<alignment> - Controls text alignment (e.g., text-left, text-center).
html 
	<h1 class="text-3xl font-bold text-center">Big Bold Title</h1>
	<p class="text-lg">This is a paragraph with a large font size.</p>
  • text-3xl makes the heading large.
  • font-bold makes the heading bold.
  • text-center centers the heading.

Colour Utilities

Tailwind has built-in colour utilities for both text and backgrounds.

Key Classes:

  • text-<colour> - Sets text colour (e.g., text-blue-500, text-gray-700).
  • bg-<colour> - Sets background colour (e.g., bg-green-500, bg-yellow-300).
html 
	<div class="text-white bg-purple-600 p-4">
	  White text on a purple background.
	</div>

Basic Font Settings

Tailwind also provides utilities to set fonts and control basic typographic settings.

Key Classes:

  • font-sans, font-serif, font-mono - Sets font family.
  • leading-<size> - Sets line-height (e.g., leading-tight, leading-loose).
  • tracking-<size> - Controls letter-spacing (e.g., tracking-wide).
html 
	<p class="font-serif text-lg leading-relaxed tracking-wide">
	  This is a serif font with relaxed line-height and wide letter-spacing.
	</p>

Borders, Backgrounds, and Effects

These utilities help you add borders, backgrounds, and visual effects to your elements.

Adding Borders

You can quickly apply borders with Tailwind’s border utilities.

Key Classes:

  • border - Adds a 1px solid border.
  • border-<size> - Controls border width (e.g., border-2, border-4).
  • border-<color> - Controls border color (e.g., border-red-500).
  • rounded-<size> - Controls border-radius (e.g., rounded, rounded-full).
html 
	<div class="border-4 border-blue-500 rounded-lg p-4">
	  A box with a thick blue border and rounded corners.
	</div>

Background Utilities

Tailwind allows you to easily apply background colors and images.

Key Classes:

  • bg-<color> - Sets a background color (e.g., bg-red-500, bg-gray-200).
  • bg-gradient-to-r - Creates a gradient background.
  • bg-[url('...')] - Used to set the background image.
  • bg-cover - Ensures the background image covers the entire container.

Background gradient:

html 
	<div class="bg-gradient-to-r from-green-400 to-blue-500 text-white p-8">
	  Gradient background with text.
	</div>

Background image:

html 
	<div class="bg-[url('https://example.com/image.jpg')] bg-cover h-64 w-full">
	  Background image covering the container.
	</div>

Shadows and Opacity

Tailwind provides utilities to add shadows and control opacity for elements.

Key Classes:

  • shadow - Adds a default shadow.
  • shadow-<size> - Controls shadow size (e.g., shadow-md, shadow-lg).
  • opacity-<value> - Controls opacity (e.g., opacity-50 for 50% opacity).
html 
	<div class="shadow-lg opacity-75 p-4 bg-white">
	  Box with a large shadow and 75% opacity.
	</div>

Interactive States

Tailwind allows you to easily add hover and focus effects for interactive elements.

Hover and Focus Effects

You can modify elements’ styles on hover or focus using Tailwind’s pseudo-class utilities.

Key Classes:

  • hover:<utility> - Applies a utility on hover (e.g., hover:bg-blue-700).
  • focus:<utility> - Applies a utility when the element is focused (e.g., focus:ring-2).
html 
	<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">
	  Hover over me!
	</button>

In this example, the button changes to a darker blue when hovered.

Group Hover

The group class allows you to apply hover effects to multiple elements in a container. When the parent (group) is hovered, all child elements marked with group-hover will change their styles.

html 
	<div class="group bg-gray-200 p-6">
	  <h3 class="text-lg group-hover:text-blue-500">Title</h3>
	  <p class="text-gray-700 group-hover:text-blue-300">Hover over this box.</p>
	</div>

In this example, both the title and paragraph change color when the parent div is hovered.

Positioning Utilities

Tailwind includes utilities for positioning elements using relative, absolute, fixed, or sticky positioning.

Key Classes:

  • relative, absolute, fixed, sticky - Set the positioning method.
  • top-<size>, right-<size>, bottom-<size>, left-<size> - Control the position of the element.
html 
	<div class="relative h-64 bg-gray-200">
	  <div class="absolute top-4 left-4 bg-red-500 text-white p-4">
	    Absolutely positioned box
	  </div>
	</div>

In this example, the inner box is positioned 1rem from the top and left within a relatively positioned container.

Z-Index Utilities

Tailwind provides utilities to control the stacking order of elements, useful when working with overlays or components that need to appear on top of others.

Key Classes:

  • z-<value> - Controls the z-index (e.g., z-10, z-50, z-auto).
html 
	<div class="relative">
	  <div class="absolute z-10 bg-blue-500 p-4">Z-index 10</div>
	  <div class="absolute z-20 bg-green-500 p-4">Z-index 20</div>
	</div>

In this example, the green box is stacked above the blue box because it has a higher z-index value.