Tailwind CSS 4 cheatsheet

Tailwind CSS 4: Configuration in CSS

6 common Tailwind CSS 4 tasks.

Add a theme color

Define a design token in the @theme block to get utilities such as bg-brand and text-brand.

@theme { --color-brand: #3b82f6; }

Define a font token to get a matching font-display utility.

@theme { --font-display: "Satoshi", sans-serif; }

Tell Tailwind to look for class names in a path it does not detect automatically, such as a package in node_modules.

@source "../node_modules/my-ui-library";

Apply dark: variants when a .dark class is present instead of following the system preference.

@custom-variant dark (&:where(.dark, .dark *));

Create a reusable utility that works with variants such as hover: and md:.

@utility content-auto { content-visibility: auto; }

Inline existing utility classes into a custom CSS rule.

@apply font-semibold px-4 py-2 rounded-lg;