Tailwind CSS: Build Beautiful UIs Faster

Tailwind CSS is a utility-first CSS framework that lets you build custom designs without leaving your HTML. Instead of writing custom CSS, you compose designs using pre-built utility classes.

Why Tailwind?

Traditional CSS: ```html

Hello

```

With Tailwind: ```html

Hello

\`\`\`

Benefits:

  • No context switching between HTML and CSS
  • No naming things (no more “card-wrapper-container”)
  • Responsive design built-in
  • Tiny production builds (unused CSS purged)
  • Consistent design system

Getting Started

Install Tailwind:

```bash npm install -D tailwindcss postcss autoprefixer npx tailwindcss init ```

Configure your template paths:

```javascript // tailwind.config.js export default { content: [’./src/**/*.{html,js,jsx,ts,tsx}’], theme: { extend: {}, }, plugins: [], } ```

Add Tailwind directives:

```css /* styles.css */ @tailwind base; @tailwind components; @tailwind utilities; ```

Core Concepts

Spacing

Consistent spacing using a 4px scale:

```html

Padding: 1rem (16px)
Horizontal 1rem, vertical 0.5rem
Top 1rem, bottom 2rem
Margin: 1rem
Center horizontally
Top 1rem, bottom 2rem
Items have 1rem gap
\`\`\`

Colors

Comprehensive color palette:

```html

Blue background
Light gray

Red text

Dark gray text

Blue border
50% opacity
\`\`\`

Typography

```html

Extra small

Small

Base (16px)

Large

Extra large

2XL

Light

Normal

Medium

Bold

Italic

Underlined

Strikethrough

Left

Center

Right

\`\`\`

Layout

Flexbox

```html

Left
Right
Vertical stack
Horizontal row
Wraps to next line
Top align
Center align
Bottom align
Left justify
Center justify
Right justify
Space between
\`\`\`

Grid

```html

1
2
3
Spans 2 columns
1 column
\`\`\`

Responsive Design

Mobile-first breakpoints:

```html

Small on mobile, larger on desktop
Visible on mobile, hidden on tablet+
Responsive grid
\`\`\`

Building Components

Button

```html ```

Card

```html

Card Title

Card description goes here.

\`\`\`

```html

\`\`\`

Form

```html

\`\`\`

Advanced Features

Dark Mode

```html

This adapts to dark mode
\`\`\`

Animations

```html

Smooth hover effect
Spinning
Pulsing
Bouncing
\`\`\`

Custom Utilities

```javascript // tailwind.config.js export default { theme: { extend: { colors: { brand: { light: ‘#3fbaeb’, DEFAULT: ‘#0fa9e6’, dark: ‘#0c87b8’, }, }, spacing: { ‘128’: ‘32rem’, }, }, }, } ```

Extracting Components

For repeated patterns, create components:

React: ```jsx function Button({ children, variant = ‘primary’ }) { const baseClasses = ‘px-4 py-2 rounded font-medium transition’; const variants = { primary: ‘bg-blue-500 text-white hover:bg-blue-600’, secondary: ‘bg-gray-200 text-gray-800 hover:bg-gray-300’, };

return ( <button className={`${baseClasses} ${variants[variant]}`}> {children} ); } ```

Best Practices

  1. Use @apply sparingly - Prefer utility classes in HTML
  2. Create components for repeated patterns
  3. Use the config file for custom values
  4. Enable purging in production for small file sizes
  5. Use responsive prefixes for mobile-first design
  6. Leverage hover/focus states for interactivity

Common Patterns

Centering

```html

Centered container
Centered content
Absolute center
\`\`\`

Aspect Ratios

```html

16:9 ratio
1:1 ratio
\`\`\`

Truncate Text

```html

This text will truncate with ellipsis...

This text truncates after 3 lines...

\`\`\`

Resources

Tailwind CSS makes styling fast and consistent. Start using it in your next project!