1. 布局 - w: width - max-w: max-width - h: height - max-h:max-height - m: margin - mt: margin-top - mb:margin-bottom - ml: margin-left - mr:margin-right - p: padding - pt: padding-top - pb: padding-bottom - pl: padding-left - pr: padding-right 2. 文本样式 - font...
.py-1padding-top: 0.25rem; padding-bottom: 0.25rem; .px-1padding-left: 0.25rem; padding-right: 0.25rem; .py-2padding-top: 0.5rem; padding-bottom: 0.5rem; .px-2padding-left: 0.5rem; padding-right: 0.5rem; .py-3padding-top: 0.75rem; padding-bottom: 0.75rem; ...
p-44 padding: 11rem; p-48 padding: 12rem; p-52 padding: 13rem; p-56 padding: 14rem; p-60 padding: 15rem; p-64 padding: 16rem; p-72 padding: 18rem; p-80 padding: 20rem; p-96 padding: 24rem; p-px padding: 1px; py-0 padding-top: 0px; padding-bottom: 0px; py-0.5 ...
base: 基础层级,定义一些基础属性如 margin、padding 等 components: 在这个层级创建可复用的样式块,如 card 等 utilities: 工具层级,如 layout、flex、grid 等指定层级,使用已有样式@layer: 指定样式具体在哪一层级, 如 base、component、utilities @apply: 使用 TailwindCSS 现有类名...
有9 种不同的字体大小和相当多的颜色的Utilize Class,因此你可以通过仅更新 html 文件进行设计,而无需编写自己的 css 样式。 如果你想使用未在 Tailwind CSS 的Utilize Class中注册的颜色,你可能想知道该怎么做。在这种情况下,你可以通过在 Tailwind CSS配置文件中注册它,以与其他 Tailwind CSSUtilize Class相同的...
tailwindcss 基于比组件更小、更灵活的工具类思想的 CSS 框架。这个思想简单来说就是用 class 保证灵活、便于自定义组件,而不是在组件基础上实现个性化。 简短的概括: 发现问题:项目中css代码痛点 .mock { margin: auto; font-size: 16px; // ... ...
将padding-bottom: 42px应用于元素，将底部边框42px推离元素的底部。
0x01 概述 (1)简介 Tailwind CSS 官网:https://www.tailwindcss.cn/ Tailwind CSS 是一个 CSS 框架,使用初级“工具”类创建布局 如 Bootstrap 等传统 CSS 框架,其使用的类通常与组件直接相关;然而,Tailwind 则采用了
TailwindCSS 是一个充满预构建类的包,可以对组件进行样式化,但是,它们非常灵活,您可以用它们做任何事情 你不需要知道 CSS 就可以使用 TailwindCSS TailwindCSS 使用了大量的缩写,例如(pb 是 padding-bottom) ,所以当你不确定的时候,阅读文档并使用它的搜索功能是很重要的 ...
TailwindCSS 是一个充满预构建类的包,可以对组件进行样式化,但是,它们非常灵活,您可以用它们做任何事情 你不需要知道 CSS 就可以使用 TailwindCSS TailwindCSS 使用了大量的缩写,例如(pb 是 padding-bottom) ,所以当你不确定的时候,阅读文档并使用它的搜索功能是很重要的 ...