Skip to main content

4 docs tagged with "tailwindcss-styling"

View all tags

Backgrounds, borders & shadows

A systematic look at backgrounds (including gradients), borders, rounded corners (border-radius), shadows, rings (focus), outlines, and dividers (divide) with Tailwind CSS. It also covers implementations of UI parts such as cards / buttons / hero sections.

Color system

Tailwind CSS's color palette (26 colors × 11 steps as of v4.2) and how to use it. It covers text / background / border / ring / opacity (the /N notation backed by color-mix) / v4's oklch color space / CSS variable integration (bg-(--my-color)) through practical examples.

Sizing and positioning

Systematizes element sizing (width / height / min-* / max-* / size-*), positioning (static/relative/absolute/fixed/sticky), z-index, object-fit, overflow, and aspect-ratio with Tailwind CSS. It also organizes implementation examples such as the three centering patterns, a fixed header, and a modal.

Typography

How to style text with Tailwind CSS. It organizes font size (text-xs to text-6xl) / weight / family / line height / letter spacing / decoration / truncation (truncate, line-clamp) and considerations for Japanese fonts through practical examples.