← กลับไปยังคุณสมบัติ
Pro

คัดลอกเป็น Tailwind

คลิกองค์ประกอบใดก็ได้และรับคลาส Tailwind ที่เทียบเท่าทันที

แปลงสไตล์เป็นคลาส Tailwind อัตโนมัติ

ตัวอย่างสด
example.com/components
Right-click any element to copy Tailwind classes
Get Started
Cut
Copy
Paste
Inspect Element
Copy as Tailwind
Generated Tailwind Classes
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
✓ Copied to clipboard!
คุณสมบัติหลัก

แปลงทันที

คลิกและทุกคุณสมบัติจะถูกแมปเป็นคลาส Tailwind

แมปอัจฉริยะ

เข้าใจระบบ Tailwind — padding 12px = p-3

คัดลอกคลิกเดียว

คัดลอกสตริงคลาสด้วยคลิกเดียว

เมนูคลิกขวา

คลิกขวาเพื่อเข้าถึงเร็ว

คุณสมบัติซับซ้อน

Box-shadow, gradient, flex/grid

ผลลัพธ์สะอาด

เฉพาะคลาสที่แตกต่างจากค่าเริ่มต้น

สิ่งที่คุณสามารถตรวจสอบได้

คัดลอกเป็น Tailwind covers the following, organized by category:

เลย์เอาต์

  • display (flex, grid, block)
  • position (relative, absolute)
  • flex-direction
  • justify-content
  • align-items
  • gap
  • overflow

ระยะห่าง

  • padding (p-*)
  • margin (m-*)
  • width (w-*)
  • height (h-*)
  • max-width
  • min-height

ตัวอักษร

  • font-size (text-*)
  • font-weight (font-*)
  • line-height (leading-*)
  • letter-spacing (tracking-*)
  • text-align
  • text-transform

สี

  • color (text-*)
  • background-color (bg-*)
  • border-color (border-*)
  • opacity

ขอบ

  • border-width (border-*)
  • border-radius (rounded-*)
  • border-style

เอฟเฟกต์

  • box-shadow (shadow-*)
  • transform (scale-*, rotate-*)
  • transition
  • cursor
กรณีการใช้งานทั่วไป

ย้ายไป Tailwind

คลิกคอมโพเนนต์และคัดลอกคลาส

วิเคราะห์ดีไซน์

คลิกองค์ประกอบสวยและใช้เป็นอ้างอิง

เร่งพัฒนา

ใช้งานในเบราว์เซอร์แล้วคลิกเอาคลาส

ความสม่ำเสมอ

ตรวจสอบค่ากับสเกล Tailwind

เรียนรู้ Tailwind

คลิกเพื่อดูการแมป CSS เป็นคลาส

วิธีใช้งาน
1

เปิดใช้งาน

คลิกไอคอนใน dock

2

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

คลิกบนหน้าเว็บ

3

ดูคลาส

แผงแสดงคลาส Tailwind

4

คัดลอกและวาง

คลิกคัดลอกและวางในโค้ด

พร้อมที่จะลองหรือยัง? คัดลอกเป็น Tailwind?

ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 39 รายการสำหรับเบราว์เซอร์ของคุณ

เพิ่มใน Chrome เพิ่มไปยัง Edge เพิ่มใน FireFox