Tailwind CSS · Utilities reference · all subjects

colors

17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Default color palette structure: 11 steps from 50 to 950

Every color in the default palette includes 11 steps. The 50 step is the lightest, and the 950 step is the darkest. For example, sky-50 is the lightest shade of sky blue, and sky-950 is the darkest.

Color utilities available across all color-related utilities

The entire color palette is available across all color-related utilities including: background-color, border-color, fill, caret-color, text-color, decoration (text decoration color), outline-color, shadow (box shadow color), inset-shadow, ring, inset-ring, accent-color, scrollbar-thumb, scrollbar-track, stroke.

Color opacity modifier syntax using slash notation

You can adjust the opacity of a color using syntax like `bg-black/75`, where the number after the slash sets the alpha channel of the color to that percentage. For example, `bg-sky-500/50` applies sky-500 at 50% opacity.

Opacity modifier supports arbitrary values and CSS variables

The opacity modifier syntax supports arbitrary values and the CSS variable shorthand. Examples: `bg-pink-500/[71.37%]` for arbitrary opacity percentage, or `bg-cyan-400/(--my-alpha-value)` to use a CSS variable for opacity.

Dark mode color variant with dark: prefix

Use the `dark` variant to write classes like `dark:bg-gray-800` that only apply a color when dark mode is active. For example, `bg-white dark:bg-gray-800` displays white in light mode and gray-800 in dark mode.

CSS color variables namespace: --color-*

Colors are exposed as CSS variables in the `--color-*` namespace. You can reference them in CSS using variables like `--color-blue-500` and `--color-pink-700`. They can be used with the CSS `var()` function.

Using color CSS variables in @layer components

Color CSS variables can be used in @layer components. Example: @layer components { .typography { color: var(--color-gray-950); a { color: var(--color-blue-500); &:hover { color: var(--color-blue-800); } } } }

Using color CSS variables as arbitrary values in utilities

Color CSS variables can be used as arbitrary values in utility classes. Example: `bg-[light-dark(var(--color-white),var(--color-gray-950))]` applies white in light mode and gray-950 in dark mode.

--alpha() function for adjusting color opacity in CSS

Tailwind includes a special `--alpha()` function to quickly adjust the opacity of a color when referencing it as a variable in CSS. Example: `background-color: --alpha(var(--color-gray-950) / 10%);` applies gray-950 at 10% opacity.

Adding custom colors using @theme directive

Use `@theme` to add custom colors to your project under the `--color-*` theme namespace. Example: @theme { --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca; } Now utilities like `bg-midnight`, `text-tahiti`, and `fill-bermuda` will be available.

Overriding default colors with @theme

Override any of the default colors by defining new theme variables with the same name in @theme. Example: @theme { --color-gray-50: oklch(0.984 0.003 247.858); --color-gray-100: oklch(0.968 0.007 247.896); } This replaces the default gray color values.

Disabling default colors with 'initial' keyword

Disable any default color by setting the theme namespace for that color to `initial`. Example: @theme { --color-lime-*: initial; --color-fuchsia-*: initial; } This removes all lime and fuchsia colors from the theme.

Creating a completely custom color palette

Use `--color-*: initial` to completely disable all default colors and define a custom palette. Example: @theme { --color-*: initial; --color-white: #fff; --color-purple: #3f3cbb; --color-midnight: #121063; } This removes all default colors and replaces them with only the specified custom colors.

@theme inline for referencing other variables in colors

Use `@theme inline` when defining colors that reference other CSS variables. Example: :root { --acme-canvas-color: oklch(0.967 0.003 264.542); } [data-theme="dark"] { --acme-canvas-color: oklch(0.21 0.034 264.665); } @theme inline { --color-canvas: var(--acme-canvas-color); } This allows dynamic color references.

Color utilities table: bg-, text-, decoration-, border-, outline-*

Color utilities include: bg-* (background color), text-* (text color), decoration-* (text decoration color), border-* (border color), outline-* (outline color). Each uses the color palette with the same scale.

Color utilities table: shadow, ring, and SVG color utilities

Color utilities include: shadow-* (box shadow color), inset-shadow-* (inset box shadow color), ring-* (ring shadow color), inset-ring-* (inset ring shadow color), fill-* (SVG fill color), stroke-* (SVG stroke color). Each uses the color palette.

Color utilities table: form and scrollbar color utilities

Color utilities include: accent-* (form control accent color), caret-* (form control caret color), scrollbar-thumb-* (scrollbar thumb color), scrollbar-track-* (scrollbar track color). Each uses the color palette.

Give your agent this brain