Tailwind CSS Cheatsheet

Phiên bản dark mode + bộ lọc searchable — gõ để lọc class

Results: 0
Tip: Thêm dấu cách để tìm chuỗi chính xác. Ví dụ: text- sẽ lọc các class có tiền tố text-.
Phím tắt
  • / focus search
  • Esc clear search
  • Enter copy first visible

Màu sắc & Nền

text-{color}-{shade}
Ví dụ: text-blue-500
bg-{color}-{shade}
Ví dụ: bg-red-500
border-{color}-{shade}
Ví dụ: border-green-400

Spacing & Size

p-{n} / m-{n}
Ví dụ: p-4, mx-auto
w-{size} / h-{size}
Ví dụ: w-16 h-10

Flex & Grid

flex / flex-col / justify-center
Ví dụ: flex items-center
grid / grid-cols-{n}
Ví dụ: grid grid-cols-3 gap-4

Display & Position

block / inline / hidden
Ví dụ: hidden md:block
absolute / relative / z-{n}
Ví dụ: absolute top-0 right-0

Effects & Animation

transition / duration-300 / hover:
Ví dụ: transition duration-300 hover:scale-105
animate-spin / animate-bounce / animate-pulse
Ví dụ: animate-pulse

Typography

text-{size} / font-bold
Ví dụ: text-4xl font-bold
Aa
leading-{size} / tracking-{size}
Ví dụ: tracking-wide
Tracking