Tailwind CSS 写法对照

28256_
4 阅读4分钟

Tailwind CSS 日常高频 CSS 属性写法对照

官网

说明:

  • Styles 列：原生 CSS 代码。
  • Class 列：Tailwind CSS 类名。
  • Tailwind CSS写法： 任意值写法（精确匹配）， 预设值写法。

1. 📦 盒模型 (Box Model)

width / height

StylesClass (Tailwind CSS)
width: 300px;w-[300px]
w-96 (24rem × 16px = 384px)
height: 200px;h-[200px]
h-48 (12rem × 16px = 192px)
width: 50%;w-1/2
height: 100vh;h-screen
width: max-content;w-max

padding

StylesClass (Tailwind CSS)
padding: 10px;p-[10px]
p-2.5 (2.5 × 0.25rem = 0.625rem ≈ 10px)
padding: 10px 20px;p-[10px_20px]
py-2.5 px-5 (y: 10px, x: 5×4px=20px)
padding: 10px 20px 30px 40px;p-[10px_20px_30px_40px]
pt-2.5 pr-5 pb-7.5 pl-10 (分别对应 10, 20, 30, 40px)
padding-top: 15px;pt-[15px]
pt-3.5 (3.5 × 4px = 14px，最接近的预设)
padding-left: 1rem;pl-[1rem]
pl-4 (4 × 0.25rem = 1rem = 16px)

margin

StylesClass (Tailwind CSS)
margin: 20px;m-[20px]
m-5 (5 × 0.25rem = 1.25rem = 20px)
margin: 0 auto;mx-auto
margin-top: -10px;-mt-[10px]
-mt-2.5 (负值逻辑同 padding)
margin-bottom: 30px;mb-[30px]
mb-7.5 (7.5 × 4px = 30px)

border

StylesClass (Tailwind CSS)
border: 1px solid #ccc;border border-[#ccc]
border border-gray-300 (使用默认色板)
border: 2px dashed #007bff;border-2 border-dashed border-[#007bff]
border-2 border-dashed border-blue-600
border-bottom: 1px solid #eee;border-b border-[#eee]
border-b border-gray-200
border-radius: 8px;rounded-[8px]
rounded-lg (默认配置通常为 0.5rem = 8px)
border-radius: 50%;rounded-full

box-sizing

StylesClass (Tailwind CSS)
box-sizing: border-box;box-border
box-sizing: content-box;box-content

2. 📐 布局 (Layout)

display

StylesClass (Tailwind CSS)
display: flex;flex
display: grid;grid
display: none;hidden
display: inline-block;inline-block

justify-content

StylesClass (Tailwind CSS)
justify-content: center;justify-center
justify-content: space-between;justify-between
justify-content: space-around;justify-around
justify-content: flex-end;justify-end

align-items

StylesClass (Tailwind CSS)
align-items: center;items-center
align-items: stretch;items-stretch
align-items: flex-start;items-start

flex-direction

StylesClass (Tailwind CSS)
flex-direction: row;flex-row
flex-direction: column;flex-col
flex-direction: row-reverse;flex-row-reverse

gap

StylesClass (Tailwind CSS)
gap: 20px;gap-[20px]
gap-5 (5 × 4px = 20px)
row-gap: 10px;gap-y-[10px]
gap-y-2.5 (2.5 × 4px = 10px)
column-gap: 15px;gap-x-[15px]
gap-x-3.5 (3.5 × 4px = 14px)

flex

StylesClass (Tailwind CSS)
flex: 1;flex-1
flex: 0 0 200px;grow-0 shrink-0 basis-[200px]
grow-0 shrink-0 basis-52 (52 × 4px = 208px)

position

StylesClass (Tailwind CSS)
position: relative; top: 10px;relative top-[10px]
relative top-2.5 (2.5 × 4px = 10px)
position: absolute; top: 0; right: 0;absolute top-0 right-0
position: fixed; top: 0; width: 100%;fixed top-0 w-full
position: sticky; top: 0;sticky top-0

z-index

StylesClass (Tailwind CSS)
z-index: 9999;z-[9999]
z-index: -1;z-[-1]``-z-10 (预设负值档位)

3. ✍️ 文本与字体 (Typography)

font-size

StylesClass (Tailwind CSS)
font-size: 16px;text-[16px]
text-base (默认 1rem = 16px)
font-size: 1rem;text-[1rem]
text-base
font-size: 1.2em;text-[1.2em]
font-size: 4vw;text-[4vw]

font-weight

StylesClass (Tailwind CSS)
font-weight: 400;font-[400]
font-normal
font-weight: 700;font-[700]
font-bold
font-weight: 300;font-[300]
font-light

color

StylesClass (Tailwind CSS)
color: #333333;text-[#333333]
text-gray-800
color: rgba(0, 0, 0, 0.6);text-[rgba(0,0,0,0.6)]
text-black/60
color: var(--primary-color);text-[var(--primary-color)]

line-height

StylesClass (Tailwind CSS)
line-height: 1.5;leading-[1.5]
leading-normal (默认 1.5)
line-height: 24px;leading-[24px]
height: 40px; line-height: 40px;h-[40px] leading-[40px]
h-10 leading-[40px] (h-10 = 2.5rem = 40px)

text-align

StylesClass (Tailwind CSS)
text-align: center;text-center
text-align: right;text-right
text-align: justify;text-justify

text-decoration

StylesClass (Tailwind CSS)
text-decoration: none;no-underline
text-decoration: line-through;line-through

white-space

StylesClass (Tailwind CSS)
white-space: nowrap;whitespace-nowrap
white-space: pre-wrap;whitespace-pre-wrap

text-overflow

StylesClass (Tailwind CSS)
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;truncate

4. 🎨 背景与视觉 (Background & Visuals)

background

StylesClass (Tailwind CSS)
background-color: #ffffff;bg-[#ffffff]
bg-white
background: url(...) no-repeat center/cover;bg-[url(...)] bg-no-repeat bg-center bg-cover

background-size

StylesClass (Tailwind CSS)
background-size: cover;bg-cover
background-size: contain;bg-contain
background-size: 100% 100%;bg-[100%_100%]

box-shadow

StylesClass (Tailwind CSS)
box-shadow: 0 4px 10px rgba(0,0,0,0.1);shadow-[0_4px_10px_rgba(0,0,0,0.1)]
shadow-md (预设值)
box-shadow: inset 0 0 10px #ccc;shadow-[inset_0_0_10px_#ccc]

opacity

StylesClass (Tailwind CSS)
opacity: 0.5;opacity-[0.5]
opacity-50 (50%)
opacity: 0;opacity-0

cursor

StylesClass (Tailwind CSS)
cursor: pointer;cursor-pointer
cursor: not-allowed;cursor-not-allowed
cursor: wait;cursor-wait
cursor: text;cursor-text

object-fit

StylesClass (Tailwind CSS)
object-fit: cover;object-cover
object-fit: contain;object-contain

5. ✨ 过渡与动画 (Transition & Animation)

transition

StylesClass (Tailwind CSS)
transition: background-color 0.3s ease;transition-colors duration-[300ms] ease-in-out
transition-colors duration-300 (300 = 300ms)
transition: transform 0.2s;transition-transform duration-[200ms]
transition-transform duration-200

transform

StylesClass (Tailwind CSS)
transform: translateX(-50%);-translate-x-1/2
transform: translateY(-10px);-translate-y-[10px]
-translate-y-2.5 (2.5 × 4px = 10px)
transform: scale(1.1);scale-[1.1]
scale-110 (110% = 1.1)
transform: rotate(45deg);rotate-45 (45deg)

animation

StylesClass (Tailwind CSS)
animation: fadeIn 1s ease-in-out forwards;animate-[fadeIn_1s_ease-in-out_forwards]
animation: spin 1s linear infinite;animate-spin
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;animate-pulse

6. 🛠️ 其他高频实用属性

overflow

StylesClass (Tailwind CSS)
overflow: hidden;overflow-hidden
overflow: auto;overflow-auto
overflow: scroll;overflow-scroll
overflow-x: auto;overflow-x-auto

visibility

StylesClass (Tailwind CSS)
visibility: hidden;invisible
visibility: visible;visible

list-style

StylesClass (Tailwind CSS)
list-style: none;list-none

pointer-events

StylesClass (Tailwind CSS)
pointer-events: none;pointer-events-none
pointer-events: auto;pointer-events-auto

user-select

StylesClass (Tailwind CSS)
user-select: none;select-none
avatar
文章
阅读
粉丝