Tailwind CSS Basics

Tailwind CSS provides a comprehensive set of utilities that you can use to build custom designs directly in your HTML. In this guide, we’ll explore some of the core utilities in Tailwind, including spacing, typography, color, layout, and responsive design. Understanding these basics will help you create clean, responsive, and consistent designs.

Working with Spacing Utilities (Padding, Margin)

Tailwind CSS offers a range of utilities to control spacing, including padding (p-*) and margin (m-*). These utilities allow you to add space around and inside elements.

Padding Utilities

Padding utilities add space inside an element.

Example: Adding Padding

				
					<div class="p-4">This div has 1rem (16px) padding on all sides.</div>

p-4: Adds padding of 1rem (16px) on all sides.
px-4: Adds horizontal padding (left and right) of 1rem (16px).
py-2: Adds vertical padding (top and bottom) of 0.5rem (8px).
pl-6: Adds left padding of 1.5rem (24px).

Margin Utilities

Margin utilities add space outside an element.

Example: Adding Margin

				
					<div class="m-4">This div has 1rem (16px) margin on all sides.</div>

m-4: Adds margin of 1rem (16px) on all sides.
mt-2: Adds top margin of 0.5rem (8px).
mb-2: Adds bottom margin of 0.5rem (8px).
ml-6: Adds left margin of 1.5rem (24px).

Auto Margin

Tailwind also provides utilities for auto margins, which are useful for centering elements.

Example: Centering a Block Element Horizontally

				
					<div class="mx-auto w-64 bg-gray-200 p-4">This div is centered horizontally.</div>

mx-auto: Automatically adjusts the left and right margins to center the element.
w-64: Sets the width of the element to 16rem (256px).

Applying Typography Utilities (Font Size, Weight, Line Height)

Tailwind’s typography utilities allow you to control the size, weight, and spacing of text.

Font Weight

Font weight utilities control the thickness of the text.

Example: Setting Font Weight

				
					<p class="font-bold">This text is bold.</p>

font-thin: Thin font weight (100).
font-normal: Normal font weight (400).
font-semibold: Semi-bold font weight (600).
font-bold: Bold font weight (700).

Line Height

Line height utilities control the spacing between lines of text.

Example: Setting Line Height

				
					<p class="leading-loose">This text has loose line spacing.</p>

leading-none: No extra space between lines.
leading-tight: Tight line spacing.
leading-normal: Normal line spacing.
leading-loose: Loose line spacing.

Using Color Utilities for Text, Background, Borders

Tailwind provides extensive color utilities for applying colors to text, backgrounds, and borders.

Text Color

Text color utilities apply color to the text.

Example: Setting Text Color

				
					<p class="text-blue-500">This text is blue.</p>

text-red-500: Medium red text color.
text-green-700: Dark green text color.
text-gray-900: Very dark gray text color.

Background Color

Background color utilities set the background color of an element.

Example: Setting Background Color

				
					<div class="bg-green-500 text-white p-4">This div has a green background.</div>

bg-blue-200: Light blue background.
bg-yellow-400: Bright yellow background.
bg-gray-100: Very light gray background.

Border Color

Border color utilities set the color of an element’s borders.

Example: Setting Border Color

				
					<div class="border border-red-500 p-4">This div has a red border.</div>

border-blue-500: Medium blue border.
border-gray-300: Light gray border.
border-black: Black border.

Working with Layout Utilities (Flexbox, Grid, Positioning)

Tailwind CSS offers powerful layout utilities, including Flexbox, Grid, and positioning utilities, to create complex layouts easily.

Flexbox

Flexbox utilities allow you to create flexible and responsive layouts.

Example: Using Flexbox for Layout

				
					<div class="flex">
    <div class="flex-1 bg-gray-200 p-4">Flex item 1</div>
    <div class="flex-1 bg-gray-400 p-4">Flex item 2</div>
    <div class="flex-1 bg-gray-600 p-4">Flex item 3</div>
</div>

flex: Makes the container a flexbox.
flex-1: Each child takes up an equal portion of the available space.
justify-center: Centers items horizontally.
items-center: Centers items vertically.

Grid

Grid utilities enable you to create grid-based layouts.

Example: Using Grid for Layout

				
					<div class="grid grid-cols-3 gap-4">
    <div class="bg-gray-200 p-4">Grid item 1</div>
    <div class="bg-gray-400 p-4">Grid item 2</div>
    <div class="bg-gray-600 p-4">Grid item 3</div>
</div>

grid: Makes the container a grid.
grid-cols-3: Creates a grid with three columns.
gap-4: Adds a gap between grid items.

Positioning

Positioning utilities control the positioning of elements.

Example: Absolute Positioning

				
					<div class="relative h-64 bg-gray-200">
    <div class="absolute bottom-0 right-0 bg-blue-500 p-4">Positioned box</div>
</div>

relative: Sets the container as a reference for absolute positioning.
absolute: Absolutely positions the element relative to the nearest positioned ancestor.
top-0, bottom-0, left-0, right-0: Position the element on the respective side.

Responsive Design with Tailwind’s Responsive Utilities (sm:, md:, lg:, xl:)

Tailwind makes it easy to create responsive designs by using responsive utility prefixes like sm:, md:, lg:, and xl:.

Responsive Utilities

Responsive utilities apply styles at specific breakpoints.

Example: Responsive Padding

				
					<div class="p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12">
    This div has different padding on various screen sizes.
</div>

sm: Applies at screen widths of 640px and up.
md: Applies at screen widths of 768px and up.
lg: Applies at screen widths of 1024px and up.
xl: Applies at screen widths of 1280px and up.

Example: Responsive Flexbox Layout

				
					<div class="flex flex-col sm:flex-row">
    <div class="flex-1 bg-gray-200 p-4">Item 1</div>
    <div class="flex-1 bg-gray-400 p-4">Item 2</div>
</div>

flex-col: Stacks items vertically (column) by default.
sm:flex-row: Stacks items horizontally (row) on small screens and larger.

Summary

Tailwind CSS provides a powerful set of utility classes that allow you to style your HTML directly with consistent, maintainable, and responsive designs. Understanding the basics—such as working with spacing, typography, color, layout, and responsive utilities—will enable you to build complex and visually appealing UIs quickly and efficiently. Tailwind’s utility-first approach ensures that you have the flexibility to design custom interfaces while maintaining a clean and concise codebase.

Contents