Tailwind

Aspect Ratio

Class	Properties
aspect-auto	aspect-ratio: auto;
aspect-square	aspect-ratio: 1 / 1;
aspect-video	aspect-ratio: 16 / 9;

Container

Class	Breakpoint	Properties
container	None	width: 100%;
	sm	max-width: 640px;

Columns

Class	Properties
columns-1	columns: 1;

Break

Class	Properties
break-after-auto	break-after: auto;
break-before-all	break-before: all;
break-inside-avoid-page	break-inside: avoid-page;

2:break-before

Display

Class	Properties
block	display: block;
inline-block	display: inline-block;
inline	display: inline;

When controlling the flow of text, using the CSS propertydisplay: inlinewill cause the text inside the element to wrap normally. While using the property display: inline-blockwill wrap the element to prevent the text inside from extending beyond its parent. Lastly, using the property display: blockwill put the element on its own line and fill its parent.

Floats

Class	Properties
float-right	float: right;
float-left	float: left;
float-none	float: none;

Clear

clear-left, right, both, none

Overflow

overflow-auto, hidden, clip, visible, scroll

Position

static, fixed, absolute, relative, sticky

Top / Right / Bottom / Left

[top|right|bottom|left|inset]-[size]

Z-Index

z-[index]

Sample

Class	Properties
aspect-auto	aspect-ratio: auto;

よく使う

Flex Direction

フレックスアイテムの方向を制御する

Class	Properties
flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-col	flex-direction: column;
flex-col-reverse	flex-direction: column-reverse;

flex-row

flex-row-reverse

flex-col

Justify Content

flexアイテムが並ぶ向き(縦・横)に沿って左寄せ・中央寄せ・右寄せなどの配置を指定する

Class	Properties
justify-normal	justify-content: normal;
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-center	justify-content: center;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-evenly	justify-content: space-evenly;
justify-stretch	justify-content: stretch;

justify-normal

justify-start

justify-end

justify-center

justify-between

justify-around

justify-evenly

justify-stretch

Align Items

コンテナーの交差軸に沿ってフレックスアイテムとグリッドアイテムを配置する方法を制御する

Class	Properties
items-start	align-items: flex-start;
items-end	align-items: flex-end;
items-center	align-items: center;
items-baseline	align-items: baseline;
items-stretch	align-items: stretch;

items-stretch

items-start

items-end

items-center

items-baseline

グリッドテンプレートの列

グリッドレイアウトで列を指定する

Class	Properties
grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));

グリッド内の列の指定

grid-cols-[n]

Gap

グリッドアイテムとフレックスボックスアイテムの間のガターを制御する

Class	Properties
gap-0	gap: 0px;
gap-x-1	column-gap: 0.25rem; /* 4px */
gap-y-2	row-gap: 0.5rem; /* 8px */

要素間のギャップの設定

gap-[size]

グリッドおよびフレックスボックスレイアウトの行と列の間のギャップを変更する

Flex

Flex Basis

フレックスアイテムの初期サイズを制御する

Class	Properties
basis-0	flex-basis: 0px;
basis-1	flex-basis: 0.25rem; /* 4px */
basis-auto	flex-basis: auto;
basis-px	flex-basis: 1px;
basis-0.5	flex-basis: 0.125rem; /* 2px */
basis-1/2	flex-basis: 50%;
basis-full	flex-basis: 100%;

Flex Direction

フレックスアイテムの方向を制御する

Class	Properties
flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-col	flex-direction: column;
flex-col-reverse	flex-direction: column-reverse;

flex-row

flex-row-reverse

flex-col

Flex Wrap

フレックスアイテムのラップ方法を制御する

Class	Properties
flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;
flex-nowrap	flex-wrap: nowrap;

flex-nowrap

flex-wrap

Flex

フレックスアイテムの拡大と縮小の両方を制御する

Class	Properties
flex-1	flex: 1 1 0%;
flex-auto	flex: 1 1 auto;
flex-initial	flex: 0 1 auto;
flex-none	flex: none;

flex-initial

初期サイズを考慮し、フレックスアイテムを縮小するが拡大しないようにする

flex-1

初期サイズを無視して、必要に応じてフレックスアイテムを拡大および縮小できるようにする

flex-auto

初期サイズを考慮して、フレックスアイテムを拡大および縮小できるようにする

flex-none

フレックスアイテムが拡大または縮小するのを防ぐ

Flex Grow

フレックスアイテムがどのように成長するかを制御する

Class	Properties
grow	flex-grow: 1;
grow-0	flex-grow: 0;

grow

可能なスペースを埋めるためにフレックスアイテムを拡張できるようにする

grow-0

フレックスアイテムが大きくなるのを防ぐ

Flex Shrink

フレックスアイテムの縮小方法を制御する

Class	Properties
shrink	flex-shrink: 1;
shrink-0	flex-shrink: 0;

shrink

必要に応じてフレックスアイテムを縮小できるようにする

shrink-0

フレックスアイテムが縮小するのを防ぐ

Grid

グリッドテンプレートの列

グリッドレイアウトで列を指定する

Class	Properties
grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));

グリッド内の列の指定

grid-cols-[n]

グリッド列の開始/終了

要素のサイズ変更とグリッド列全体への配置方法を制御する

Class	Properties
col-auto	grid-column: auto;
col-span-1	grid-column: span 1 / span 1;
col-span-full	grid-column: 1 / -1;
col-start-1	grid-column-start: 1;
col-end-1	grid-column-end: 1;

スパニングカラム

col-span-[n]

要素がn列にまたがるようにします

開始行と終了行

col-start-[n], col-end-[n]

要素をn 番目のグリッドラインで開始または終了させます

グリッドテンプレートの行

グリッドレイアウトで行を指定する

Class	Properties
grid-rows-1	grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2	grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-none	grid-template-rows: none;

グリッド内の行の指定

grid-rows-[n]

行のグリッドを作成します

グリッド行の開始/終了

要素のサイズ変更とグリッド行全体への配置方法を制御する

Class	Properties
row-auto	grid-row: auto;
row-span-1	grid-row: span 1 / span 1;
row-span-full	grid-row: 1 / -1;
row-start-1	grid-row-start: 1;
row-end-1	grid-row-end: 1;

スパニング行

row-span-[n]

行のグリッドを作成します

開始行と終了行

row-start-[n], row-end-[n]

要素をn 番目のグリッドラインで開始または終了させます

グリッドオートフロー

グリッド内の要素を自動配置する方法を制御する

Class	Properties
grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));

グリッド要素の配置の制御

grid-flow-[keyword]

グリッドレイアウトに対する自動配置アルゴリズムの動作を制御します

Grid Auto Columns/Rows

Class	Properties
auto-cols-auto	grid-auto-columns: auto;
auto-cols-min	grid-auto-columns: min-content;
auto-cols-max	grid-auto-columns: max-content;
auto-cols-fr	grid-auto-columns: minmax(0, 1fr);

Class	Properties
auto-rows-auto	grid-auto-rows: auto;
auto-rows-min	grid-auto-rows: min-content;
auto-rows-max	grid-auto-rows: max-content;
auto-rows-fr	grid-auto-rows: minmax(0, 1fr);

Gap

グリッドアイテムとフレックスボックスアイテムの間のガターを制御する

Class	Properties
gap-0	gap: 0px;
gap-x-1	column-gap: 0.25rem; /* 4px */
gap-y-2	row-gap: 0.5rem; /* 8px */

要素間のギャップの設定

gap-[size]

グリッドおよびフレックスボックスレイアウトの行と列の間のギャップを変更する

Justify Content

flexアイテムが並ぶ向き(縦・横)に沿って左寄せ・中央寄せ・右寄せなどの配置を指定する

Class	Properties
justify-normal	justify-content: normal;
justify-start	justify-content: flex-start;
justify-end	justify-content: flex-end;
justify-center	justify-content: center;
justify-between	justify-content: space-between;
justify-around	justify-content: space-around;
justify-evenly	justify-content: space-evenly;
justify-stretch	justify-content: stretch;

justify-normal

justify-start

justify-end

justify-center

justify-between

justify-around

justify-evenly

justify-stretch

Justify Items

インライン軸に沿ってグリッドアイテムを整列する方法を制御する

Class	Properties
justify-items-start	justify-items: start;
justify-items-end	justify-items: end;
justify-items-center	justify-items: center;
justify-items-stretch	justify-items: stretch;

justify-items-start

justify-items-center

justify-items-start

Align Content

複数行のフレックスおよびグリッドコンテナーでの行の配置方法を制御する

Class	Properties
content-normal	align-content: normal;
content-center	align-content: center;
content-start	align-content: flex-start;
content-end	align-content: flex-end;
content-between	align-content: space-between;
content-around	align-content: space-around;
content-evenly	align-content: space-evenly;
content-baseline	align-content: baseline;
content-stretch	align-content: stretch;

content-start

content-center

content-between

content-around

content-evenly

content-stretch

Align Items

コンテナーの交差軸に沿ってフレックスアイテムとグリッドアイテムを配置する方法を制御する

Class	Properties
items-start	align-items: flex-start;
items-end	align-items: flex-end;
items-center	align-items: center;
items-baseline	align-items: baseline;
items-stretch	align-items: stretch;

items-start

items-center

items-baseline

Sample

Class	Properties
aspect-auto	aspect-ratio: auto;

Spacing

Padding

Class	Properties
p-0	padding: 0px;

Margin

Class	Properties
m-0	margin: 0px;

Space Between

Class	Properties
space-x-0	margin-left: 0px;

Sizing

Width

Class	Properties
w-0	width: 0px;
min-w-0	min-width: 0px;
max-w-0	max-width: 0px;

Height

Class	Properties
h-0	height: 0px;
min-h-0	min-height: 0px;
max-h-0	max-height: 0px;

Sample

Class	Properties
aspect-auto	aspect-ratio: auto;

Default heading

We invest in the world’s potential

Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.

Learn more

Secondary text

FlowbiteThis is secondary text

Heading

text-[size], font-[size]

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Font weight

font-[size]

Aa(thin)

Aa(extralight)

Aa(normal)

Aa(medium)

Aa(semibold)

Aa(bold)

Aa(extrabold)

Aa(black)

Sample

Class	Properties
aspect-auto	aspect-ratio: auto;

Secondary text

FlowbiteThis is secondary text

responsive

objectFit: contain

objectFit: scale-down

objectFit: cover

height: 150px

objectFit: none

height: 150px

Sample

Class	Properties
aspect-auto	aspect-ratio: auto;

Tailwind

Aspect Ratio

Container

Columns

Break

Display

Floats

Clear

Overflow

Position

Top / Right / Bottom / Left

Z-Index

Sample

よく使う

Flex Direction

Justify Content

Align Items

グリッドテンプレートの列

Gap

Flex

Flex Basis

Flex Direction

Flex Wrap

Flex

Flex Grow

Flex Shrink

Grid

グリッドテンプレートの列

グリッド列の開始/終了

グリッド テンプレートの行

グリッド行の開始/終了

グリッド オート フロー

Grid Auto Columns/Rows

Gap

Justify Content

Justify Items

Align Content

Align Items

Sample

Spacing

Padding

Margin

Space Between

Sizing

Width

Height

Sample

Default heading

We invest in the world’s potential

Secondary text

FlowbiteThis is secondary text

Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Font size

Font weight

Sample

Secondary text

FlowbiteThis is secondary text

Sample

グリッドテンプレートの行

グリッドオートフロー