Framework cheatsheet
Tailwind CSS 4 Cheatsheet
Install, build and configure Tailwind CSS 4 with the CLI, Vite or PostCSS.
Installation
- Install with the Tailwind CLI — Install Tailwind CSS and its standalone command-line tool.
- Install with Vite — Install Tailwind CSS and its Vite plugin.
- Install with PostCSS — Install Tailwind CSS, its PostCSS plugin and PostCSS.
- Import Tailwind in your CSS — Add this line to your main CSS file to load Tailwind's styles.
- Upgrade a Tailwind 3 project — Run the official upgrade tool, which updates dependencies and migrates your config and templates. Needs Node.js 20 or later.
Building CSS
- Build and watch for changes — Scan your files for classes and rebuild the CSS whenever they change.
- Build minified CSS for production — Generate a single compressed stylesheet.
- Link the built stylesheet — Reference the generated CSS from your HTML head.
Configuration in CSS
- Add a theme color — Define a design token in the @theme block to get utilities such as bg-brand and text-brand.
- Add a font family — Define a font token to get a matching font-display utility.
- Scan an extra source folder — Tell Tailwind to look for class names in a path it does not detect automatically, such as a package in node_modules.
- Switch dark mode to a class — Apply dark: variants when a .dark class is present instead of following the system preference.
- Define a custom utility — Create a reusable utility that works with variants such as hover: and md:.
- Reuse utilities in your own CSS — Inline existing utility classes into a custom CSS rule.
Related cheatsheets
- Angular 22 cheatsheet — Angular CLI commands and standalone component, signals, template, routing, HTTP and forms snippets.
- Astro cheatsheet — Build fast content sites with Astro: components, layouts, routing, content collections, islands, endpoints and deployment.
- Django 6 cheatsheet — Create projects, run migrations, test and deploy Django apps, plus the ORM queries you use every day.
- .NET and ASP.NET Core 10 cheatsheet — The dotnet CLI for creating, building, testing and publishing projects, plus common ASP.NET Core and EF Core code.
- Express 5 cheatsheet — Build HTTP servers and APIs with Express 5 on Node.js.
- FastAPI 0.115 cheatsheet — Install, run, test and deploy FastAPI apps from the command line.