The utility-first approach means using small, single-purpose classes that apply specific styles rather than semantic class names. Each utility class does one thing well.

Advantages:

• Faster development: No need to context-switch between HTML and CSS files
• Easier maintenance: Styles are co-located with markup
• No CSS bloat: No unused CSS accumulating over time
• Consistent spacing/colors: Built-in design system prevents inconsistencies
• Mobile-first responsive: Built-in responsive prefixes
• No naming conventions: No need to worry about BEM, OOCSS, etc.

Installation methods:

1. CDN (development only): <link href="https://cdn.tailwindcss.com" rel="stylesheet">
2. npm/yarn: npm install tailwindcss
3. PostCSS plugin: Most common for production
4. Standalone CLI: tailwindcss binary
5. Framework integrations: Next.js, Nuxt, Laravel Mix, etc.

The PostCSS plugin approach is recommended for production as it allows customization and purging.

The tailwind.config.js file is the main configuration file that allows you to:

• Customize the design system: Colors, spacing, fonts, etc.
• Configure content paths: Tell Tailwind where to look for class names
• Add plugins: Extend functionality with official or third-party plugins
• Enable/disable features: Core plugins, variants, etc.
• Set up purging: Specify which files to scan for used classes

Tailwind utilities follow a predictable naming pattern based on CSS properties:

Common examples:

• Padding: p-4 (padding: 1rem), px-2 (horizontal padding: 0.5rem)
• Margin: m-8 (margin: 2rem), mt-4 (margin-top: 1rem)
• Colors: bg-blue-500 (background), text-red-600 (color)
• Display: flex, block, hidden, inline-block
• Width/Height: w-64 (width: 16rem), h-screen (height: 100vh)

The pattern is usually: [property]-[value] or [property][direction]-[value]

Tailwind uses a consistent spacing scale based on 0.25rem (4px) increments:

• 0 = 0px
• 1 = 0.25rem (4px)
• 2 = 0.5rem (8px)
• 4 = 1rem (16px)
• 8 = 2rem (32px)
• 16 = 4rem (64px)

Examples:

• p-4 = padding: 1rem
• m-8 = margin: 2rem
• space-x-4 = gap of 1rem between child elements horizontally

This scale provides consistent spacing throughout your design.

Tailwind provides comprehensive flexbox utilities:

Basic flex container:

<div class="flex items-center justify-between">
  <div>Left</div>
  <div>Right</div>
</div>

Common flexbox utilities:

• flex - display: flex
• flex-col - flex-direction: column
• items-center - align-items: center
• justify-between - justify-content: space-between
• flex-1 - flex: 1 1 0%
• flex-shrink-0 - flex-shrink: 0

Tailwind provides position utilities with corresponding placement utilities:

Position types:

• relative - position: relative
• absolute - position: absolute
• fixed - position: fixed
• sticky - position: sticky

Placement utilities:

• top-0, right-0, bottom-0, left-0
• inset-0 - top, right, bottom, left: 0
• inset-x-4 - left and right: 1rem
• inset-y-2 - top and bottom: 0.5rem

Example:

<div class="relative">
  <div class="absolute top-2 right-2">Positioned element</div>
</div>

Tailwind uses a mobile-first responsive approach with breakpoint prefixes:

Default breakpoints:

• sm: - 640px and up
• md: - 768px and up
• lg: - 1024px and up
• xl: - 1280px and up
• 2xl: - 1536px and up

Example:

<div class="text-sm md:text-base lg:text-lg xl:text-xl">
  Responsive text
</div>

Styles apply from the specified breakpoint upward unless overridden.

Tailwind uses a numbered color scale from 50 (lightest) to 950 (darkest):

Color scale:

• 50 - Very light tint
• 100, 200, 300 - Light shades
• 400, 500, 600 - Medium shades (500 is the base)
• 700, 800, 900 - Dark shades
• 950 - Very dark shade

Usage examples:

• bg-blue-500 - Blue background (medium blue)
• text-gray-700 - Dark gray text
• border-red-200 - Light red border

This system provides consistent color relationships across your design.

Opacity utilities control the transparency of elements using a 0-100 scale:

Examples:

• opacity-0 - Fully transparent (0%)
• opacity-25 - 25% opacity
• opacity-50 - 50% opacity
• opacity-75 - 75% opacity
• opacity-100 - Fully opaque (100%)

Color opacity:
You can also modify opacity of background colors, text colors, etc.:

• bg-blue-500/50 - Blue background with 50% opacity
• text-red-600/75 - Red text with 75% opacity

This is useful for overlays, disabled states, and creating depth in designs.