space-x-4, 子元素之间间距 4px,space-y-4 同理4. 边框、弧度边框宽度 通过border-value 设定线宽,颜色的设置也很简单:border-颜色-数值。 border-t|b|l|r: 上|下|左|右边框. 如 border-t-2 即 border-top-width: 2px; border-x|y:横向|纵向 边框 不加value 时,默认 value 为 1px边框...
间距:(-)space-[direct]-[number] (-):负间距 direct:间隔方向,取值 x-横向、y-纵向 number=number * 0.25rem=number * 4px Item 1 Item 2 Item 3 Item 1 Item 2 Item 3 flex:采用 Flex 布局 flex-col:Flex 布局纵向 (3)版面设计 字体:font-[family] Font Sans Font Serif Font Mono 自...
登录 注册 移动端菜单按钮 <!-- 汉堡菜单按钮 -->
AI代码解释 ChitChatYou have anewmessage! 届时,当公司自上而下推进「chatGPT生成代码」时,「原子化CSS」更省token。 而刚才已经说了,要接受TailwindCSS(或者说背后的「原子化CSS」)需要的正是自上而下推动,这就是一个重要契机。 而在众多「原子化CSS」方案(比如还有UnoCSS)中,tailwindCSS发布时间最早(...
.some-class-name{--tw-space-x-reverse:0;margin-right:calc(0.5rem*var(--tw-space-x-reverse));margin-left:calc(0.5rem*calc(1-var(--tw-space-x-reverse)));} 我们不必在全局 CSS 文件中的任何地方明确提及这些样式!Tailwind CSS 会自动为我们进行声明。这就是 Tailwind CSS 的美妙之处。
ChitChat You have anewmessaeg! 使用Tailwind 的优势: 省去了以外为了定义 class 名称带来的烦恼; 省去了重复定义 css 造成的样式文件增大; 避免了 css 修改造成了未知样式错乱带来问题; 与传统内联样式相比的优势: 实现的 UI 全部基于一套预定义功能类实现,UI 更加...
ChitChatYou have a new message! 使用语义化的 CSS 类名有以下几个主要优势: 代码可读性更强。类名如p-6、max-w-sm等一目了然地表达了样式效果,甚至可以联想到最终的效果🤔。 CSS 更模块化。不同的类可组合使用,避免重复样式。 更易维护。直观的类名和模块化 CSS 让其他开发者更容易理解...
... 其中每个class代表一个定义好的CSS规则,比如: p-6代表padding: 1.5rem; /* 24px */ bg-white代表background-color: white; 对于用惯了「语义化CSS」的开发者,一时是很难接受「原子化CSS」的。在他们看来,这就是开历史的倒车,还得额外记忆
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 ...
间距:(-)space-[direct]-[number] (-):负间距 direct:间隔方向,取值x-横向、y-纵向 number=number* 0.25rem=number* 4px Item 1 Item 2 Item 3 Item 1 Item 2 Item 3 Item 1 Item 2 Item 3 Item 1 Item 2