Tailwind Lookup
类名速查
Layout
container
设置容器宽度
block
display: block
inline-block
display: inline-block
inline
display: inline
flex
display: flex
inline-flex
display: inline-flex
grid
display: grid
hidden
display: none
Flexbox
flex-row
flex-direction: row
flex-col
flex-direction: column
flex-wrap
flex-wrap: wrap
flex-nowrap
flex-wrap: nowrap
justify-start
justify-content: flex-start
justify-center
justify-content: center
justify-between
justify-content: space-between
items-start
align-items: flex-start
items-center
align-items: center
items-end
align-items: flex-end
Spacing
p-0
padding: 0px
p-1
padding: 0.25rem
p-2
padding: 0.5rem
p-4
padding: 1rem
p-8
padding: 2rem
m-0
margin: 0px
m-1
margin: 0.25rem
m-2
margin: 0.5rem
m-4
margin: 1rem
m-8
margin: 2rem
mx-auto
margin-left: auto; margin-right: auto
Sizing
w-0
width: 0px
w-1
width: 0.25rem
w-4
width: 1rem
w-8
width: 2rem
w-1/2
width: 50%
w-1/3
width: 33.333333%
w-full
width: 100%
w-screen
width: 100vw
h-0
height: 0px
h-1
height: 0.25rem
h-4
height: 1rem
h-8
height: 2rem
h-1/2
height: 50%
h-full
height: 100%
h-screen
height: 100vh
Typography
text-xs
font-size: 0.75rem
text-sm
font-size: 0.875rem
text-base
font-size: 1rem
text-lg
font-size: 1.125rem
text-xl
font-size: 1.25rem
text-2xl
font-size: 1.5rem
font-normal
font-weight: 400
font-bold
font-weight: 700
text-left
text-align: left
text-center
text-align: center
text-right
text-align: right
uppercase
text-transform: uppercase
lowercase
text-transform: lowercase
capitalize
text-transform: capitalize
Background
bg-transparent
background-color: transparent
bg-black
background-color: #000
bg-white
background-color: #fff
bg-gray-100
background-color: #f7fafc
bg-gray-500
background-color: #a0aec0
bg-red-500
background-color: #f56565
bg-yellow-500
background-color: #ecc94b
bg-green-500
background-color: #48bb78
bg-blue-500
background-color: #4299e1
bg-indigo-500
background-color: #667eea
bg-purple-500
background-color: #9f7aea
bg-pink-500
background-color: #ed64a6
Borders
border
border-width: 1px
border-0
border-width: 0px
border-2
border-width: 2px
border-4
border-width: 4px
border-t
border-top-width: 1px
border-r
border-right-width: 1px
border-b
border-bottom-width: 1px
border-l
border-left-width: 1px
border-solid
border-style: solid
border-dashed
border-style: dashed
border-dotted
border-style: dotted
border-none
border-style: none
rounded-none
border-radius: 0px
rounded-sm
border-radius: 0.125rem
rounded
border-radius: 0.25rem
rounded-md
border-radius: 0.375rem
rounded-lg
border-radius: 0.5rem
rounded-full
border-radius: 9999px
Effects
shadow
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1)
shadow-md
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)
shadow-lg
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1)
shadow-xl
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1)
shadow-2xl
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25)
shadow-none
box-shadow: none
opacity-0
opacity: 0
opacity-25
opacity: 0.25
opacity-50
opacity: 0.5
opacity-75
opacity: 0.75
opacity-100
opacity: 1
Tailwind CSS 类速查表
这是一个常用的 Tailwind CSS 类参考列表。点击任意类名可将其复制到剪贴板。
- 使用搜索框查找特定的类名或描述
- 使用类别筛选器缩小查找范围
- 点击任意类名可将其复制到剪贴板