const{Fragment:i,jsx:h,jsxs:s}=arguments[0];function _createMdxContent(l){const e={a:"a",code:"code",figure:"figure",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",strong:"strong",ul:"ul",...l.components},{Callout:n}=e;return n||function(i,h){throw new Error("Expected "+(h?"component":"object")+" `"+i+"` to be defined: you likely forgot to import, pass, or provide it.")}("Callout",!0),s(i,{children:[h(e.h2,{id:"为什么选择-tailwind-css",children:h(e.a,{className:"anchor",href:"#为什么选择-tailwind-css",children:"为什么选择 Tailwind CSS"})}),"\n",h(e.p,{children:"Tailwind CSS 是一个功能优先（utility-first）的 CSS 框架："}),"\n",s(e.ul,{children:["\n",s(e.li,{children:[h(e.strong,{children:"快速开发"})," — 不用离开 HTML 写样式"]}),"\n",s(e.li,{children:[h(e.strong,{children:"一致性"})," — 内置设计系统约束"]}),"\n",s(e.li,{children:[h(e.strong,{children:"体积小"})," — 自动 tree-shaking 未使用的样式"]}),"\n",s(e.li,{children:[h(e.strong,{children:"响应式"})," — ",h(e.code,{children:"sm:"}),", ",h(e.code,{children:"md:"}),", ",h(e.code,{children:"lg:"})," 前缀"]}),"\n"]}),"\n",h(e.h2,{id:"实用技巧",children:h(e.a,{className:"anchor",href:"#实用技巧",children:"实用技巧"})}),"\n",h(e.h3,{id:"1-使用-group-实现父子联动",children:s(e.a,{className:"anchor",href:"#1-使用-group-实现父子联动",children:["1. 使用 ",h(e.code,{children:"group"})," 实现父子联动"]})}),"\n",h(e.figure,{"data-rehype-pretty-code-figure":"",children:h(e.pre,{style:{"--shiki-dark":"#adbac7","--shiki-light":"#24292e","--shiki-dark-bg":"#22272e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"html","data-theme":"github-dark-dimmed github-light",children:s(e.code,{"data-language":"html","data-theme":"github-dark-dimmed github-light",style:{display:"grid"},children:[s(e.span,{"data-line":"",children:[h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:"<"}),h(e.span,{style:{"--shiki-dark":"#8DDB8C","--shiki-light":"#22863A"},children:"div"}),h(e.span,{style:{"--shiki-dark":"#6CB6FF","--shiki-light":"#6F42C1"},children:" class"}),h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:"="}),h(e.span,{style:{"--shiki-dark":"#96D0FF","--shiki-light":"#032F62"},children:'"group p-4 hover:bg-gray-100 rounded-xl"'}),h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:">"})]}),"\n",s(e.span,{"data-line":"",children:[h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:" <"}),h(e.span,{style:{"--shiki-dark":"#8DDB8C","--shiki-light":"#22863A"},children:"h3"}),h(e.span,{style:{"--shiki-dark":"#6CB6FF","--shiki-light":"#6F42C1"},children:" class"}),h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:"="}),h(e.span,{style:{"--shiki-dark":"#96D0FF","--shiki-light":"#032F62"},children:'"group-hover:text-blue-500 transition-colors"'}),h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:">"})]}),"\n",h(e.span,{"data-line":"",children:h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:" 标题会随父元素悬停变色"})}),"\n",s(e.span,{"data-line":"",children:[h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:" "})]}),"\n",s(e.span,{"data-line":"",children:[h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:" <"}),h(e.span,{style:{"--shiki-dark":"#8DDB8C","--shiki-light":"#22863A"},children:"p"}),h(e.span,{style:{"--shiki-dark":"#6CB6FF","--shiki-light":"#6F42C1"},children:" class"}),h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:"="}),h(e.span,{style:{"--shiki-dark":"#96D0FF","--shiki-light":"#032F62"},children:'"group-hover:opacity-100 opacity-0 transition-opacity"'}),h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:">"})]}),"\n",h(e.span,{"data-line":"",children:h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:" 描述文字会渐入"})}),"\n",s(e.span,{"data-line":"",children:[h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:" "})]}),"\n",s(e.span,{"data-line":"",children:[h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:""})]})]})})}),"\n",h(e.h3,{id:"2-line-clamp-截断多行文本",children:s(e.a,{className:"anchor",href:"#2-line-clamp-截断多行文本",children:["2. ",h(e.code,{children:"line-clamp"})," 截断多行文本"]})}),"\n",h(e.figure,{"data-rehype-pretty-code-figure":"",children:h(e.pre,{style:{"--shiki-dark":"#adbac7","--shiki-light":"#24292e","--shiki-dark-bg":"#22272e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"html","data-theme":"github-dark-dimmed github-light",children:s(e.code,{"data-language":"html","data-theme":"github-dark-dimmed github-light",style:{display:"grid"},children:[s(e.span,{"data-line":"",children:[h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:"<"}),h(e.span,{style:{"--shiki-dark":"#8DDB8C","--shiki-light":"#22863A"},children:"p"}),h(e.span,{style:{"--shiki-dark":"#6CB6FF","--shiki-light":"#6F42C1"},children:" class"}),h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:"="}),h(e.span,{style:{"--shiki-dark":"#96D0FF","--shiki-light":"#032F62"},children:'"line-clamp-2"'}),h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:">"})]}),"\n",h(e.span,{"data-line":"",children:h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:" 这段很长的文本会被截断为两行，多余的部分"})}),"\n",h(e.span,{"data-line":"",children:h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:" 会显示省略号..."})}),"\n",s(e.span,{"data-line":"",children:[h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:""})]})]})})}),"\n",h(e.h3,{id:"3-暗色模式",children:h(e.a,{className:"anchor",href:"#3-暗色模式",children:"3. 暗色模式"})}),"\n",h(e.figure,{"data-rehype-pretty-code-figure":"",children:h(e.pre,{style:{"--shiki-dark":"#adbac7","--shiki-light":"#24292e","--shiki-dark-bg":"#22272e","--shiki-light-bg":"#fff"},tabIndex:"0","data-language":"html","data-theme":"github-dark-dimmed github-light",children:s(e.code,{"data-language":"html","data-theme":"github-dark-dimmed github-light",style:{display:"grid"},children:[s(e.span,{"data-line":"",children:[h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:"<"}),h(e.span,{style:{"--shiki-dark":"#8DDB8C","--shiki-light":"#22863A"},children:"div"}),h(e.span,{style:{"--shiki-dark":"#6CB6FF","--shiki-light":"#6F42C1"},children:" class"}),h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:"="}),h(e.span,{style:{"--shiki-dark":"#96D0FF","--shiki-light":"#032F62"},children:'"bg-white dark:bg-gray-900"'}),h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:">"})]}),"\n",s(e.span,{"data-line":"",children:[h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:" <"}),h(e.span,{style:{"--shiki-dark":"#8DDB8C","--shiki-light":"#22863A"},children:"p"}),h(e.span,{style:{"--shiki-dark":"#6CB6FF","--shiki-light":"#6F42C1"},children:" class"}),h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:"="}),h(e.span,{style:{"--shiki-dark":"#96D0FF","--shiki-light":"#032F62"},children:'"text-gray-900 dark:text-gray-100"'}),h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:">"})]}),"\n",h(e.span,{"data-line":"",children:h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:" 自动适应暗色模式"})}),"\n",s(e.span,{"data-line":"",children:[h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:" "})]}),"\n",s(e.span,{"data-line":"",children:[h(e.span,{style:{"--shiki-dark":"#ADBAC7","--shiki-light":"#24292E"},children:""})]})]})})}),"\n",h(n,{type:"success",children:h(e.p,{children:"Tailwind CSS v4 引入了原生 CSS 变量支持，主题切换更加流畅！"})})]})}return{default:function(i={}){const{wrapper:s}=i.components||{};return s?h(s,{...i,children:h(_createMdxContent,{...i})}):_createMdxContent(i)}};

#前端

Tailwind CSS 实用技巧