TailWind Css生成顺序

/_ ========== 第一层：基础层 (@layer base) ========== / / Preflight 重置样式 _/ *, ::before, ::after { box-sizing: border-box; border: 0 solid; }

html { line-height: 1.5; } body { margin: 0; } /_ ... _/

/_ ========== 第二层：组件层 (@layer components) ========== / / 自定义组件样式（如果你添加了） _/ .btn { ... } .card { ... }

/_ ========== 第三层：工具类层 (@layer utilities) ========== / / 按功能分组，固定顺序 _/

/_ 1. 布局 (Layout) / .container { ... } .box-border { box-sizing: border-box; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .grid { display: grid; } / ⚠️ grid 在 flex 之后 _/ .inline-grid { display: inline-grid; } .contents { display: contents; } .hidden { display: none; }

/_ 2. Flexbox & Grid / .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .gap-0 { gap: 0; } .gap-1 { gap: 0.25rem; } / ... _/

/_ 3. 间距 (Spacing) / .p-0 { padding: 0; } .p-1 { padding: 0.25rem; } .p-4 { padding: 1rem; } .p-8 { padding: 2rem; } / ⚠️ p-8 在 p-4 之后 / / ... / .m-0 { margin: 0; } .m-4 { margin: 1rem; } / ... _/

/_ 4. 尺寸 (Sizing) / .w-0 { width: 0; } .w-full { width: 100%; } .h-screen { height: 100vh; } / ... _/

/_ 5. 排版 (Typography) / .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-base { font-size: 1rem; } .font-normal { font-weight: 400; } .font-bold { font-weight: 700; } / ... _/

/_ 6. 颜色 (Colors) / .bg-transparent { background-color: transparent; } .bg-black { background-color: #000; } .bg-red-500 { background-color: #ef4444; } .bg-blue-600 { background-color: #2563eb; } / ⚠️ blue 在 red 之后 / .text-white { color: #fff; } .text-red-500 { color: #ef4444; } .text-blue-600 { color: #2563eb; } / ... _/

/_ 7. 边框 (Borders) / .border { border-width: 1px; } .border-2 { border-width: 2px; } .rounded { border-radius: 0.25rem; } .rounded-lg { border-radius: 0.5rem; } / ... _/

/_ 8. 效果 (Effects) / .shadow { box-shadow: ...; } .opacity-0 { opacity: 0; } .opacity-100 { opacity: 1; } / ... _/

/_ 9. 过渡与动画 (Transitions & Animation) / .transition { transition-property: ...; } .duration-300 { transition-duration: 300ms; } / ... _/

/_ 10. 伪类变体（按断点和状态排序） / / hover: _/ .hover:bg-blue-700:hover { background-color: #1d4ed8; }

/_ focus: _/ .focus:outline-none:focus { outline: none; }

/_ 响应式断点 _/ @media (min-width: 640px) { .sm:flex { display: flex; } .sm:text-lg { font-size: 1.125rem; } }

@media (min-width: 768px) { .md:grid { display: grid; } .md:w-1/2 { width: 50%; } }

@media (min-width: 1024px) { .lg:block { display: block; } } /_ ... _/