ผู้ช่วย Tailwind

คุณสมบัติหลัก

แบ่งหมวดหมู่

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). แต่ละ category is collapsible and clearly labeled.

คลิกตรวจสอบ

คลิกบนองค์ประกอบใดก็ได้ — buttons, cards, headings, inputs, containers — and the panel ทันที populates with the full Tailwind class breakdown. The element is highlighted with a purple border so you know exactly what's being inspected.

คัดลอกแต่ละคลาส

แต่ละ Tailwind class is displayed as a clickable tag. Click ใดก็ได้ single tag (like p-5 or font-bold) to copy just that class to คลิปบอร์ดของคุณ. 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 คลิปบอร์ดของคุณ. Ready to paste into className="..." or class="..." โดยตรง.

แมปสเกลแม่นยำ

ทุก 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.

เลื่อนดู CSS ต้นฉบับ

Hover over ใดก็ได้ Tailwind class tag in the panel เพื่อดู 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 covers the following, organized by category:

คลาสเลย์เอาต์

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

คลาสระยะห่าง

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

คลาสตัวอักษร

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

คลาสสี

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

คลาสขอบ

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

คลาสเอฟเฟกต์

shadow-sm / shadow-md / shadow-lg
ring-*
transition
duration-*
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 ใดก็ได้ 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.

เรียนชื่อ Tailwind

Hover over class tags เพื่อดู 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 ใดก็ได้ 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.

วิธีใช้งาน

เปิดใช้งาน

เปิด DevSuite Pro dock ลอย and click the Tailwind Helper icon. The tool activates and a panel appears on the right side, ready to display class breakdowns.

คลิกองค์ประกอบ

คลิกองค์ประกอบใดก็ได้ บนหน้า. It gets highlighted with a purple border, and the panel populates with categorized Tailwind classes. แต่ละ 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. แต่ละ class is a clickable tag — hover เพื่อดู 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 ทุกthing as a single string. Paste โดยตรง into your Tailwind component.

คลิกองค์ประกอบอื่น

Click a different element บนหน้า to ทันที update the panel with new classes. No need to deactivate and reactivate — just keep clicking to inspect multiple elements in sequence.