Utility-First CSS Approach for Website

Utility-First CSS Approach for Site

Utility-First is writing styles directly in HTML element classes, using ready utilities: flex, items-center, text-lg, bg-blue-500. Don't invent class names (.card-header-wrapper), don't switch between HTML and CSS files. Tailwind CSS is an implementation of this approach.

It works faster not because classes are pretty, but because CSS doesn't grow: each new component reuses the same utilities. CSS bundle stops growing linearly with project.

Installing Tailwind CSS 4

Tailwind CSS 4 completely reworked configuration — now everything via CSS, no tailwind.config.ts:

npm install tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [tailwindcss()],
})

/* src/styles/globals.css */
@import 'tailwindcss';

/* Custom tokens directly in CSS */
@theme {
  --color-primary: #2563eb;
  --color-primary-foreground: #ffffff;
  --color-secondary: #f1f5f9;
  --radius-md: 8px;
  --font-sans: 'Inter', system-ui, sans-serif;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* Base styles */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  body {
    font-family: var(--font-sans);
    color: var(--color-foreground);
    background: var(--color-background);
  }

  h1, h2, h3 { font-weight: 600; }
}

Using Tailwind utilities

function Card({ title, children }) {
  return (
    <div className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
      <h2 className="text-lg font-bold mb-4">{title}</h2>
      <p className="text-gray-600">{children}</p>
    </div>
  )
}

function Button({ children, variant = 'primary' }) {
  const variants = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    ghost: 'text-gray-700 hover:bg-gray-100',
  }

  return (
    <button className={`px-4 py-2 rounded-md font-medium transition-colors ${variants[variant]}`}>
      {children}
    </button>
  )
}

Tailwind CSS 3 (stable version)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  darkMode: ['selector', '[data-theme="dark"]'],
  theme: {
    extend: {
      colors: {
        primary: '#2563eb',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
} satisfies Config

Utility-First CSS accelerates development and reduces CSS bundle size.