$devvkit learn --librarie tailwind-css-guide

Tailwind CSS Guide

[css][styling][ui]

JavaScript / TypeScript

Install

npm install -D tailwindcss @tailwindcss/postcss
npx tailwindcss init

Compose pre-built utility classes directly in HTML. Smaller CSS bundles via purging.

Design in HTML with constraints: fixed color palette, spacing scale, breakpoints.

v4 uses CSS-first configuration with @theme directives instead of JS config.

Setup

PostCSS config· Configure Tailwind plugin.

// postcss.config.mjs
export default { plugins: { '@tailwindcss/postcss': {} } };

CSS import· Import directives.

@import 'tailwindcss';

Flex center· Center content.

<div class="flex items-center justify-center h-screen">

Grid· Responsive grid.

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">

Typography· Text styling.

<h1 class="text-3xl font-bold text-center tracking-tight">Title</h1>
<p class="text-sm text-zinc-500 leading-relaxed">Body</p>

Spacing· Margin and padding.

<div class="m-4 p-6">Spacing</div>
<div class="mx-auto max-w-2xl">Centered</div>
<div class="space-y-4">Vertical spacing</div>

Colors· Text and background.

<p class="text-amber-500">Amber</p>
<div class="bg-zinc-100 dark:bg-zinc-900">Dark mode</div>

Responsive· Breakpoint prefixes.

<div class="text-sm md:text-base lg:text-lg">Responsive</div>
<div class="hidden md:block">Desktop only</div>

Hover/focus· Interaction states.

<button class="hover:bg-amber-600 focus:outline-none focus:ring-2 active:scale-95">

Dark mode· Dark variant.

<div class="bg-white dark:bg-zinc-900 text-black dark:text-white">Dark aware</div>

Custom theme· CSS-first config.

@import 'tailwindcss';
@theme {
  --color-brand: #06b6d4;
  --font-display: 'Inter', sans-serif;
}