Tailwind CSS — Utility-First CSS

Tech Catalog / tailwindcss.html

Compose styles from small prebuilt class names. You build UIs without growing a large separate CSS file.

💬 Tailwind builds UIs by composing style names.

For example p-4 (padding) and text-center. The class name is the style, so you spend less time hunting for where a style is defined.

• Utility classes: each does one small thing.
• Responsive: md:, lg: prefixes target breakpoints.
• JIT: only classes you actually use end up in the final CSS.

Install (existing project)

npm install -D tailwindcss @tailwindcss/cli
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch

Usage

<div class="p-4 bg-white rounded shadow">
  <p class="text-center text-gray-700">Hello</p>
</div>

Common problems

• Styles not applied: check the content paths include your source files.
• Class lists get long: extract repeating combinations into a component.

Verified date indicates freshness. Check applicability conditions for older material.