Msaidizi wa Tailwind

Vipengele Muhimu

Categorized Class Breakdown

Tailwind classes are organized into clear categories: Layout (flex, grid, position), Spacing (padding, margin, gap), Typography (font size, weight, color), Colors (background, text, border), Borders (radius, width, style), and Effects (shadow, opacity, transform). Each category is collapsible and clearly labeled.

Click Any Element to Inspect

Click on any element — buttons, cards, headings, inputs, containers — and the panel instantly populates with the full Tailwind class breakdown. The element is highlighted with a purple border so you know exactly what's being inspected.

Copy Individual Classes

Each Tailwind class is displayed as a clickable tag. Click any single tag (like p-5 or font-bold) to copy just that class to your clipboard. A subtle "copied" animation confirms the action. Perfect for when you only need one or two specific classes.

Copy All Classes at Once

The "Copy All Classes" button at the bottom generates a clean, space-separated string of all Tailwind classes and copies it to your clipboard. Ready to paste into className="..." or class="..." directly.

Accurate Scale Mapping

Every value is mapped to Tailwind's default spacing and sizing scale. A 16px font maps to text-base, 24px padding maps to p-6, and #7c3aed maps to purple-600. When an exact match doesn't exist, the closest scale value is chosen and noted.

Hover to See CSS Source

Hover over any Tailwind class tag in the panel to see the original computed CSS value it was generated from. For example, hovering over "p-5" shows "padding: 20px". This two-way view helps you learn the Tailwind scale by connecting classes to real CSS values.

Unachoweza Kukagua

Msaidizi wa Tailwind covers the following, organized by category:

Layout Classes

flex
grid
block
inline-flex
relative
absolute
sticky
items-center
justify-between
gap-*

Spacing Classes

p-* (padding)
m-* (margin)
px-* py-*
mx-auto
space-x-*
w-* h-*
max-w-*
min-h-*

Typography Classes

text-sm / text-base / text-lg
font-normal / font-bold
leading-* (line-height)
tracking-* (letter-spacing)
text-center
uppercase

Color Classes

text-{color}-{shade}
bg-{color}-{shade}
border-{color}-{shade}
opacity-*

Border Classes

border
border-2
rounded-* (radius)
border-solid / dashed
divide-*

Effect Classes

shadow-sm / shadow-md / shadow-lg
ring-*
transition
duration-*
hover:*

Matumizi ya Kawaida

Understanding an Element's Full Style

Unlike a flat class string, the categorized view lets you understand the complete composition of an element. See that a card uses flex layout, specific padding, bold typography, a slate background, rounded borders, and a subtle shadow — each aspect in its own section.

Building New Components from References

Inspect a well-designed element on any website, then recreate it in your Tailwind project by copying the relevant category classes. Take the layout from one element, typography from another, and colors from your brand palette — mix and match.

Learning Tailwind's Naming System

Hover over class tags to see the CSS source values. This interactive mapping is the fastest way to learn that p-4 means 16px, text-lg means 18px, or that purple-600 is #7c3aed. Turn any website into a Tailwind learning exercise.

Auditing Tailwind Usage on Your Own Site

Inspect elements on your own Tailwind-built site to verify they're using consistent spacing, colors, and typography from the design system. Spot accidental one-off values (like p-[13px]) that should be standard scale values (p-3 or p-3.5).

Comparing Copy as Tailwind vs Tailwind Helper

Use Copy as Tailwind when you need a quick class string to paste. Use Tailwind Helper when you want to study the breakdown, copy individual classes selectively, or understand why specific Tailwind classes were chosen for each CSS property.

Jinsi ya Kutumia

Activate Tailwind Helper

Open the DevSuite Pro floating dock and click the Tailwind Helper icon. The tool activates and a panel appears on the right side, ready to display class breakdowns.

Click an Element to Inspect

Click any element on the page. It gets highlighted with a purple border, and the panel populates with categorized Tailwind classes. Each category (Layout, Spacing, Typography, Colors, Borders, Effects) is shown as a section with class tags.

Explore the Categories

Browse through the categories to understand the element's complete style composition. Each class is a clickable tag — hover to see the source CSS value, click to copy that individual class.

Copy What You Need

Click individual tags to copy specific classes, or use the "Copy All Classes" button at the bottom to grab everything as a single string. Paste directly into your Tailwind component.

Click Another Element

Click a different element on the page to instantly update the panel with new classes. No need to deactivate and reactivate — just keep clicking to inspect multiple elements in sequence.