Tailwind 速查
布局
container
block
inline
inline-block
flex
grid
hidden
static
relative
absolute
fixed
sticky
overflow-hidden
overflow-auto
z-10
z-50
Flexbox
flex-row
flex-col
flex-wrap
flex-nowrap
flex-1
flex-auto
flex-none
items-start
items-center
items-end
items-stretch
justify-start
justify-center
justify-end
justify-between
justify-around
gap-1
gap-2
gap-4
gap-6
gap-8
grow
shrink
Grid
grid-cols-1
grid-cols-2
grid-cols-3
grid-cols-4
grid-cols-6
grid-cols-12
col-span-1
col-span-2
col-span-full
row-span-1
row-span-2
auto-cols-auto
auto-rows-auto
间距
p-0
p-1
p-2
p-4
p-6
p-8
px-4
py-2
m-0
m-4
m-auto
mx-auto
my-4
mt-4
mb-4
space-x-2
space-y-4
尺寸
w-full
w-screen
w-1/2
w-1/3
w-64
w-auto
h-full
h-screen
h-64
max-w-sm
max-w-md
max-w-lg
max-w-xl
max-w-2xl
max-w-7xl
排版
text-xs
text-sm
text-base
text-lg
text-xl
text-2xl
text-3xl
font-light
font-normal
font-medium
font-semibold
font-bold
text-left
text-center
text-right
leading-tight
leading-normal
leading-relaxed
tracking-wide
truncate
line-clamp-2
line-clamp-3
颜色
text-white
text-black
text-gray-500
text-gray-900
text-blue-500
text-green-500
text-red-500
text-yellow-500
bg-white
bg-black
bg-gray-100
bg-blue-500
bg-green-500
bg-red-500
bg-transparent
边框
border
border-0
border-2
border-4
border-solid
border-dashed
border-gray-200
rounded
rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-full
效果与过渡
shadow
shadow-sm
shadow-md
shadow-lg
shadow-xl
opacity-0
opacity-50
opacity-100
transition
duration-150
duration-300
ease-in-out
hover:opacity-80
hover:scale-105
cursor-pointer
select-none
响应式前缀
sm:flex
md:grid
lg:block
xl:hidden
2xl:text-xl
sm:p-4
md:p-8
lg:p-12
dark:bg-gray-900
dark:text-white
已复制!
点击任意类名复制到剪贴板。Tailwind CSS v3参考。完整文档请访问 tailwindcss.com