Tailwind CSS

Tailwind CSS is a utility-first CSS framework. Instead of writing named component classes like .card, you compose the design from many small classes such as p-4, text-lg and bg-white applied directly to elements.

Why it matters

Utility classes remove the need to invent class names and switch between HTML and stylesheets. Tailwind scans your source files at build time and generates only the CSS that you actually use, so production stylesheets are usually small. Design values come from a configurable scale of spacing, colors and breakpoints, which keeps interfaces consistent across a team.

Example

<button class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 md:px-6">
  Save
</button>

px-4 sets horizontal padding, hover: applies a style on hover, and md: applies it from the medium breakpoint upward, following a mobile-first approach.

Common mistakes

• Building class names dynamically, such as "bg-" + color + "-500". The scanner cannot see the full string, so the CSS is never generated.
• Repeating long class lists everywhere instead of extracting a component in your framework.
• Fighting the defaults rather than extending the theme configuration.
• Assuming it replaces CSS knowledge; layout and specificity rules still apply.

Related

• CSS
• Mobile-first design
• Breakpoint
• Bootstrap

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.