🛠️

CSS 转 Tailwind

将 CSS 属性转换为 TailwindCSS 类名，支持常见属性映射

常用 CSS 属性映射表

CSS 属性Tailwind 类名
display: blockblock
display: inline-blockinline-block
display: inlineinline
display: flexflex
display: inline-flexinline-flex
display: gridgrid
display: inline-gridinline-grid
display: hiddenhidden
flex-direction: rowflex-row
flex-direction: columnflex-col
flex-direction: row-reverseflex-row-reverse
flex-direction: column-reverseflex-col-reverse
justify-content: flex-startjustify-start
justify-content: centerjustify-center
justify-content: flex-endjustify-end
justify-content: space-betweenjustify-between
justify-content: space-aroundjustify-around
justify-content: space-evenlyjustify-evenly
align-items: flex-startitems-start
align-items: centeritems-center
align-items: flex-enditems-end
align-items: stretchitems-stretch
flex-wrap: wrapflex-wrap
flex-wrap: nowrapflex-nowrap
flex: 1flex-1
flex: autoflex-auto
flex: noneflex-none
flex-grow: 1grow
flex-grow: 0grow-0
flex-shrink: 0shrink-0
flex-shrink: 1shrink
padding: 4pxp-1
padding: 8pxp-2
padding: 12pxp-3
padding: 16pxp-4
padding: 24pxp-6
padding: 32pxp-8
padding: 48pxp-12
padding-top: 8pxpt-2
padding-bottom: 8pxpb-2
padding-left: 8pxpl-2
padding-right: 8pxpr-2
margin: 4pxm-1
margin: 8pxm-2
margin: 16pxm-4
margin: autom-auto
margin-top: 8pxmt-2
margin-bottom: 8pxmb-2
margin-left: 8pxml-2
margin-right: 8pxmr-2
font-size: 12pxtext-xs
font-size: 14pxtext-sm
font-size: 16pxtext-base
font-size: 18pxtext-lg
font-size: 20pxtext-xl
font-size: 24pxtext-2xl
font-size: 30pxtext-3xl
font-size: 36pxtext-4xl
font-weight: 400font-normal
font-weight: 700font-bold
font-weight: 300font-light
font-weight: 500font-medium
font-weight: 600font-semibold
text-align: lefttext-left
text-align: centertext-center
text-align: righttext-right
line-height: 1leading-none
line-height: 1.25leading-tight
line-height: 1.5leading-normal
line-height: 2leading-loose
color: #000000text-black
color: #fffffftext-white
color: #ef4444text-red-500
color: #3b82f6text-blue-500
color: #10b981text-emerald-500
color: #6b7280text-gray-500
color: #111827text-gray-900
background-color: #000000bg-black
background-color: #ffffffbg-white
background-color: transparentbg-transparent
background-color: #3b82f6bg-blue-500
background-color: #ef4444bg-red-500
background-color: #f3f4f6bg-gray-100
border: 1px solid #e5e7ebborder border-gray-200
border: 2px solid #000border-2 border-black
border-radius: 4pxrounded
border-radius: 8pxrounded-lg
border-radius: 9999pxrounded-full
border-radius: 0rounded-none
width: 100%w-full
width: 50%w-1/2
width: autow-auto
height: 100%h-full
height: autoh-auto
min-width: 0min-w-0
min-height: 100vhmin-h-screen
position: relativerelative
position: absoluteabsolute
position: fixedfixed
position: stickysticky
overflow: hiddenoverflow-hidden
overflow: autooverflow-auto
overflow: scrolloverflow-scroll
overflow-x: autooverflow-x-auto
opacity: 0opacity-0
opacity: 0.5opacity-50
opacity: 1opacity-100
cursor: pointercursor-pointer
cursor: not-allowedcursor-not-allowed
text-decoration: underlineunderline
text-decoration: line-throughline-through
text-transform: uppercaseuppercase
text-transform: lowercaselowercase
text-transform: capitalizecapitalize
gap: 4pxgap-1
gap: 8pxgap-2
gap: 16pxgap-4
gap: 24pxgap-6
box-shadow: 0 1px 2px rgba(0,0,0,0.05)shadow-sm
box-shadow: 0 1px 3px rgba(0,0,0,0.1)shadow
box-shadow: 0 4px 6px rgba(0,0,0,0.1)shadow-md
box-shadow: 0 10px 15px rgba(0,0,0,0.1)shadow-lg
transition: all 150mstransition-all duration-150
transition: all 300mstransition-all duration-300