Free Tailwind CSS v4 Cheat Sheet Online - Quick Reference Guide

This cheat sheet is built for speed. Whether you know the class name and want to see its CSS output, or you know what you want to achieve and need to find the right utility, the tool adapts to your workflow. Everything runs inside your browser with zero latency.

Tailwind CSS v4 is not an incremental update. It is a fundamental rearchitecture that changes how you configure, write, and think about utility-first CSS. The framework moved from a JavaScript configuration file to CSS-native configuration, replaced the HSL color space with OKLCH for perceptually uniform colors, introduced a new engine built on Rust and Lightning CSS for dramatically faster builds, and added dozens of new utilities that were impossible or impractical in v3. This section covers every major change and what it means for your projects. The most significant shift is the elimination of tailwind.config.js. In v4, all customization happens inside your CSS file using the @theme directive. You define your design tokens, spacing scale, colors, fonts, and breakpoints directly in CSS, which means your configuration lives alongside your styles instead of in a separate JavaScript file. The @source directive tells Tailwind where to scan for class usage, replacing the content array from the config file. The @utility directive lets you define custom utilities as CSS, and @variant lets you create custom variant modifiers. This CSS-first approach means your entire Tailwind setup is expressed in one language, one file, and one mental model. The build engine itself was rewritten in Rust on top of Lightning CSS, delivering build times up to 10x faster than v3. For large projects with thousands of templates, this means sub-second builds instead of multi-second waits. The new engine also produces smaller output because it can detect and remove unused CSS more precisely. Tree-shaking is now handled at the CSS level rather than the template level, which means fewer false positives where used classes get stripped from production builds.

If you are migrating from v3, these are the differences that will affect your day-to-day work. Some classes were renamed, some were removed entirely, and some behaviors changed in ways that might break existing layouts if you are not aware of them.

The four new CSS directives are the backbone of Tailwind v4 customization. Each one replaces a piece of the old JavaScript configuration system with a CSS-native equivalent that is more intuitive, more composable, and easier to debug.

These are the utility classes that are entirely new in v4 and did not exist in v3. Each entry shows the class name pattern, the CSS property it maps to, and a brief description of what it does. Use this table as a quick lookup when you need v4-specific functionality.

These examples show v4-specific patterns that leverage new features like 3D transforms, container queries, OKLCH colors, and CSS-first configuration. Each example is copy-ready and demonstrates a practical use case.

Migrating to v4 or starting fresh with it introduces some pitfalls that catch even experienced Tailwind users off guard. These are the errors we see most often, along with the fix for each one.

These practices help you get the most out of Tailwind v4, whether you are starting a new project or migrating an existing one. They cover configuration, performance, and team collaboration.

These are the questions developers ask most often when switching to or learning Tailwind v4, based on community forums, GitHub issues, and support channels.