Styling

Picture this: it's a Tuesday morning in early 2025 and your team is staring at a 14-second hot reload on a Next.js 14 app. The Tailwind v3 JIT compiler is choking on a 240,000-line utility scan, your…

Cites Forms plugin cutting insurance-app cross-browser input styling from a week to 20 minutes for three engineers in 2020, and the 2025 Web Almanac finding prose classes like prose-lg on ~4% of HTML pages. Provides a Tailwind v3 tailwind.config.ts with `forms({ strategy: 'class' })` (critical for not fighting existing custom form CSS) plus typography with DEFAULT css variable overrides --tw-prose-body slate-700, --tw-prose-headings slate-900, --tw-prose-links indigo-600, maxWidth 68ch, and prose-invert for dark. Notes aspect-video CLS reduction (0.05 good to 0.25 poor without reservation) and bundle sizes: Forms base ~6.5KB gzipped, class ~3.2KB, Typography ~4.8KB+2KB theme, Aspect Ratio ~0.8KB or ~0.3KB native-only. Recommends staging rollout via content-facing forms first then action triggers.

The article got pulled into a Slack debate last week between two engineers arguing about whether Tailwind was "real CSS." That conversation is a perfect proxy for the broader industry confusion: ther…

Diagnoses why Tailwind bundles balloon—PurgeCSS/JIT misconfiguration, dynamic class names constructed at runtime, unused variants kept by safelist, and over-broad content glob patterns—and walks through a case study where a 412KB CSS bundle was pruned to 38KB (a 91% reduction) by enabling JIT mode, narrowing the content glob, and removing regex patterns that blocked detection. Cites a 2024 Web Almanac figure that median CSS request weight is 400K and Lighthouse penalizes 100ms of main-thread blocking. Recommends continuous bundle monitoring via bundlesize in CI with a 2% regression threshold, plus monthly audits of unused classes via coverage tools.

Ten daily Tailwind patterns composed from utilities rather than nested component abstractions: primary/secondary/ghost button trio using focus-visible:outline and active: variants, constrained max-w-7xl container, stacked form field with focus:ring-2 ring-inset, card with aspect-video media, avatar with status dot using ring-2 ring-white, modal backdrop with bg-gray-900/50 color-mix syntax, responsive 1-4 column grid, inline-flex items-center gap-2 icon buttons, status badges, and sr-only screen-reader-only labels.

Top 5 Tailwind Mistakes Beginners Make. The article started teaching Tailwind workshops in 2023, and It has watched hundreds of developers make the same handful of mistakes. They're not career-ending mistakes, but they slow you down, cause weird bugs, and frustrate the people reviewing your PRs. After running about a

Revises the long-standing 'avoid @apply' advice for Tailwind v4, presenting a three-tier mental model (inline utilities for one-offs, @apply for repeated semantic patterns in 3+ places, full components for behavior-driven styles). Walks through four worked examples (hero section, card pattern, prop-driven Button component, and v4 @utility directive) and warns about over-abstraction, @apply chains that duplicate component hierarchies, and the telltale signs of an over-extracted codebase.

Tailwind Plugins You Should Know in 2026. A few months ago It a PR that added a "forms" component to a project. The reviewer pointed out that It would written 47 lines of CSS to style inputs consistently across the app — and that `@tailwindcss/forms` would have done it in

A successful admin template rests on four pillars: adaptive layout shell (offcanvas on mobile, persistent sidebar on desktop), scalable navigation with collapse groups and search, density-tuned tables/forms (0.625rem padding), and coherent dark mode via Bootstrap 5.3's CSS variables. The Nimbus template demonstrates sticky sidebar, `/` keyboard shortcut, and theme persistence to avoid flash.

Frames Tailwind v4's Rust engine rewrite as 10x faster cold builds and even larger incremental wins, plus CSS-first @theme config, source-relative auto-detection, @utility directive, and @variant dark theming. Documents a v3-to-v4 migration that took five engineer-days across 280 components and dropped dev start from 9s to 1.4s. Walks through oklch() color scales, container queries, color-mix, and a Figma sync plugin over CSS variables.