Tailwind palīgs pārbauda jebkuru elementu un ģenerē pilnīgu, kategorizētu atbilstošo Tailwind CSS klašu sadalījumu.
While Copy as Tailwind gives you a quick class string to paste, Tailwind Helper is the deep-dive companion. It's built for developers who want to understand the full style composition of an element in Tailwind terms. Each computed CSS property is mapped to its Tailwind equivalent and grouped into logical categories. You can see at a glance that an element uses flex layout with items-center alignment, has p-5 padding with a gap-3 between children, uses text-lg font-bold for typography, and has a bg-slate-900 rounded-lg border border-slate-700 appearance. Click any individual class tag to copy just that one, or use "Copy All" to grab the complete string. The categorized view makes it easy to cherry-pick exactly the classes you need rather than copying everything.
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 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.
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.
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.
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 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.
Tailwind palīgs covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*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.
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.
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.
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).
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.
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 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.
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.
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 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.
Instalējiet DevSuite Pro bez maksas un atbloķējiet 39+ izstrādātāju rīkus savam pārlūkam.