tailwindcss

Tailwind CSS docs

Get started with Tailwind CSS

Tailwind Components

DaisyUI

Flowbite - 基于 TailwindCSS组件库

Tailwind CSS Django - Flowbite

Tailwind CSS TypeScript - Flowbite

Tailwind CSS TypeScript - Flowbite - git


Tailwind CSS 开发入门

Tailwind CSS 与 Flexbox 和 Grid 布局

gap

外边距(Margin)
m-{size}: 设置四个方向的外边距。
mt-{size}: 设置上外边距(margin-top)。
mr-{size}: 设置右外边距(margin-right)。
mb-{size}: 设置下外边距(margin-bottom)。
ml-{size}: 设置左外边距(margin-left)。
mx-{size}: 设置水平外边距(左右外边距)。
my-{size}: 设置垂直外边距(上下外边距)。
常见的外边距值:
m-0: 设置外边距为 0。
m-1 到 m-64: 设置不同大小的外边距,默认是根据 rem 单位来设置的。
m-px: 设置外边距为 1px。
m-auto: 设置外边距为自动,常用于居中对齐。

内边距(Padding)
p-{size}: 设置四个方向的内边距。
pt-{size}: 设置上内边距(padding-top)。
pr-{size}: 设置右内边距(padding-right)。
pb-{size}: 设置下内边距(padding-bottom)。
pl-{size}: 设置左内边距(padding-left)。
px-{size}: 设置水平内边距(左右内边距)。
py-{size}: 设置垂直内边距(上下内边距)。
常见的内边距值:
p-0: 设置内边距为 0。
p-1 到 p-64: 设置不同大小的内边距。
p-px: 设置内边距为 1px。

行间距(Line Height)
leading-none: 设置行间距为 1(无间距)。
leading-tight: 设置行间距为更紧凑的值。
leading-snug, leading-normal, leading-loose: 提供不同的行间距值。
leading-{size}: 使用指定的单位设置精确的行间距。

字间距(Letter Spacing)
tracking-tight: 缩小字间距。
tracking-normal: 设置正常的字间距。
tracking-wide: 增大字间距。
tracking-{size}: 使用指定的单位设置字间距。

空间(Gap)
gap-0: 设置间距为 0。
gap-1 到 gap-64: 设置不同的间距值。