Why Tailwind CSS v4?
Tailwind CSS v4 introduces CSS-first configuration, automatic content detection, and blazing fast performance.
Design Tokens in v4
@theme { --color-primary-500: oklch(0.55 0.2 250); --font-display: "Inter", sans-serif; --radius-lg: 0.75rem; --shadow-card: 0 1px 3px oklch(0 0 0 / 0.1);}Building Accessible Components
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: "primary" | "secondary" | "ghost"; size?: "sm" | "md" | "lg"; loading?: boolean;}function Button({ variant = "primary", size = "md", loading, children, ...props }: ButtonProps) { return ( <button className={cn( "inline-flex items-center justify-center rounded-full font-medium transition-colors", "focus-visible:outline-2 focus-visible:outline-offset-2", "disabled:pointer-events-none disabled:opacity-50", variantStyles[variant], sizeStyles[size], )} disabled={loading || props.disabled} aria-busy={loading || undefined} {...props} > {loading && <Spinner className="mr-2" aria-hidden />} {children} </button> );}Dark Mode
Tailwind v4 makes dark mode effortless with the 'dark' variant and CSS custom properties.
Testing Your Design System
Visual regression testing with Chromatic or Percy
Accessibility testing with axe-core
Interaction testing with Testing Library
Documentation with Storybook