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.
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 of1rem(16px) on all sides.px-4: Adds horizontal padding (left and right) of1rem(16px).py-2: Adds vertical padding (top and bottom) of0.5rem(8px).pl-6: Adds left padding of1.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 of1rem(16px) on all sides.mt-2: Adds top margin of0.5rem(8px).mb-2: Adds bottom margin of0.5rem(8px).ml-6: Adds left margin of1.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 to16rem(256px).
Tailwind’s typography utilities allow you to control the size, weight, and spacing of text.
Font Size
Font size utilities set the size of the text.
Example: Setting Font Size
<p class="text-2xl">This text is large.</p>text-xs: Extra small text size (0.75rem/ 12px).text-base: Base text size (1rem/ 16px).text-2xl: Large text size (1.5rem/ 24px).text-4xl: Extra-large text size (2.25rem/ 36px).
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.
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.
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.
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 of640pxand up.md:Applies at screen widths of768pxand up.lg:Applies at screen widths of1024pxand up.xl:Applies at screen widths of1280pxand 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.
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.