tailwindcss-backgrounds_skill

Overview

This skill provides a concise reference for Tailwind CSS v4.1 background utilities, covering colors, gradients (linear, radial, conic), images, sizing, positioning, repeat rules, and blend modes. It focuses on the OKLCH P3 color palette, new conic gradient utilities, and practical combinations for modern UI backgrounds.

How this skill works

It documents utility classes you apply directly to elements: bg-{color} for OKLCH-based colors, bg-linear-*, bg-radial-*, and bg-conic-* for gradients, and bg-[url(...)] for images. It also explains modifiers for gradient stops (from-, via-, to-), sizing (bg-cover, bg-contain, custom size), position, repeat behavior, and background-blend modes to combine images and colors.

When to use it

• To set perceptually uniform background colors across wide-gamut displays with OKLCH P3 palettes.
• When you need directional or angled color transitions using linear, radial, or conic gradients.
• To layer gradients over images for overlays, hero sections, or subtle texture effects.
• To replace decorative images with conic/radial gradients for smaller bundle size and better scaling.
• When blending a background image with a solid color for mood or contrast using blend modes.

Best practices

• Prefer palette utilities (bg-*) and opacity shorthand (/50) for better tree-shaking and consistency.
• Use bg-cover for full-bleed images and bg-contain when preserving the whole image without cropping.
• Combine bg-no-repeat and explicit sizing to avoid unwanted tiling of background images.
• Layer gradients with from-/via-/to- stops and explicit positions for precise control.
• Favor conic or radial gradients over bitmap images for circular patterns and color wheels.

Example use cases

• Hero banner: bg-[url(/img/hero.jpg)] bg-cover bg-center with a linear gradient overlay from-black/40 to-transparent.
• Translucent panel: bg-slate-900/50 px-6 py-8 rounded-lg for readable overlays on complex backgrounds.
• Decorative color wheel: w-32 h-32 rounded-full using bg-conic-0 with multiple via- stops to build a circular palette.
• Patterned card: bg-blue-600 bg-[url(/img/pattern.png)] bg-cover bg-blend-multiply to tint a texture.
• Responsive icon background: bg-linear-45 from-slate-400 to-slate-600 for angled two-tone accents.