とほほのTaiwind CSS入門

トップ > Taiwind CSS

概要(Overview)
使い始める
基礎情報
レイアウト(Layout)
フレックスボックスとグリッド(Flex & Grid)
サイジング(Sizing)
余白(Spacing)
- パディング(Padding)
- マージン(Margin)
テキスト(Text)
リスト(List)
- リストスタイル(List Style)
テーブル(Tables)
- ボーダーコラプス(Border Collapse)
- ボーダースペーシング(Border Spacing)
背景(Background)
- 背景の色(Background Color)
- 背景グラデーション(Background Gradient)
ボーダー(Border)
エフェクト(Effect)
フィルタ(Filter)
インタラクティブ(Interactive)
- カーソル(Cursor)
- リサイズ(Resize)
リンク

概要(Overview)

CSSフレームワークのひとつです。
「ユーティリティファースト」をポリシーとしています。
Bootstrap のようにボタンやフォームに特化したクラス名を指定するのではなく、class="m-10 p-10 font-bold" のようにCSSプロパティに対応するクラス名を直接指定していきます。
React や Vue.js のようなコンポーネントと組み合わせて使用することを想定しています。
React などのコンポーネントを作成する際に、HTML と CSS が分かれていたのをひとつのファイルにまとめることが可能となります。
現在(2024年1月28日)時点の最新版は v3.4.1 です。
MIT License で提供されており、無償で商用利用可能です。

使い始める

下記の CDN を利用可能です。ただし試験用であって正式プロダクトでの利用はおススメできません。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="m-10 p-10 text-3xl font-bold underline">Hello world!</h1>
</body>
</html>

正式プロダクト用のインストール方法は下記を参照してください。

https://tailwindcss.com/docs/installation

本書では Tailwind CSS のクラスの一部のみ紹介します。一覧や詳細は下記を参照してください。

https://tailwindcss.com/docs/installation (本家ドキュメント)
https://tailwindcomponents.com/cheatsheet/ (チートシート)

基礎情報

Tailwind CSS クラス名

Tailwind CSS では要素に下記のようなクラス名を指定します。

<h1 class="p-4 mb-4 text-blue-900 font-bold bg-blue-100 ">AAA</h1>

上記は下記と同じ表示になります。

<h1 style="padding:1rem; margin-bottom:1rem; color:rgb(30, 58, 138)
  font-weight:bold; background-color:rgb(219, 234, 254);">AAA</h1>

ブレークポイント(Breakpoint)

Tailwind CSS では下記のブレークポイントを定めています。

sm   640px      @media (min-width: 640px) 
md   768px      @media (min-width: 768px)
lg   1024px     @media (min-width: 1024px)
xl   1280px     @media (min-width: 1280px)
2xl  1536px     @media (min-width: 1536px)

クラス名の前にブレークポイントをつけると、ブラウザの横幅がブレークポイントより大きな場合にクラスが適用されます。

<h1 class="sm:text-red-500">Hello</h1>

方向(Direction)

x, y, t, r, b, l などの方向指示子は下記を示しています。

x    # top and bottom
y    # right and left
t    # top
r    # right
b    # bottom
l    # left
s    # start
e    # end

長さ(Length)

px は 1px を意味します。0～96 の数値は 0.25rem × 数値の長さとなります。

px   # 1px
0    # 0px
0.5  # 0.125rem
1    # 0.25rem
1.5  # 0.375rem
2    # 0.5rem
2.5  # 0.625rem
3    # 0.75rem
3.5  # 0.875rem

4    # 4 × 0.25rem
5
6
7
8
9
10
11
12

14   # 14 × 0.25rem
16
20
24
28
32
36
40
44

48   # 48 × 0.25rem
52
56
64
72
80
96

[...] で直接指定することもできます。

<h1 class="w-[320px]">...</h1>

パーセンテージ(Percentage)

下記は割合を示します。

1/2    # 50%
1/3    # 33.333333%
2/3    # 66.666667%
1/4    # 25%
2/4    # 50%
3/4    # 75%
full   # 100%

[...] で直接指定することもできます。

<h1 class="w-[30%]">...</h1>

太さ(Width)

太さは下記が定義されています。太さを省略すると 1px となります。

0      # 0px
2      # 2px
4      # 4px
8      # 8px

[...] で直接指定することもできます。

<h1 class="border-[6px]">...</h1>

色(Color)

下記の色を指定できます。

gray
red
yellow
green
blue
indigo
purple
pink

slate
zinc
neutral
stone
orange
amber
lime
emerald

teal
cyan
sky
indigo
violet
fuchsia
rose

下記の様に不透明度を 0～100 で指定することができます。

<h1 class="bg-blue-600/20">...</h1>

色見本は下記を参照してください。

https://tailwindcss.com/docs/customizing-colors

濃さ(Density)

プレフィックス(Prefix)

dark:                # Dark mode
hover:               # Hover
focus:               # Focus
active:              # Active
first:               # First child
last:                # Last child
required:            # Required
::before             # ::Before content
::after              # ::After content
::placeholder        # Placeholder
::selection          # Selected content

例えば、マウスを乗せた時にテキスト色を変更するには下記の様にします。

<div class="hover:text-red-700">...</div>

before: や after: では下記の様にコンテントを埋め込むことができます。

<h1 class="before:content-['■']">AAA</h1>

[&>selector]: は、セレクタで指定した子要素に適用します。

<ul class="[&>li]:mb-4">
  <li>AAA</li>
  <li>BBB</li>
</ul>

[&_selector]: は、セレクタで指定した子孫要素(子, 孫, ひ孫...)に適用します。

<ul class="[&_li]:mb-4">
  <li>AAA</li>
  <li>BBB</li>
</ul>

カスタムプロパティ

[...] の中でカスタムプロパティを使用することができます。

:root {
  --default-padding: .5rem;
}

<h1 class="p-[--default-padding]">...</h1>

直接CSS指定

[...] の中で直接CSSを適用することができます。

<h1 class="[color:red]">...</h1>

CSS の中のスペースは _ で指定します。

<h1 class="[padding:_1rem_2rem_3rem_4rem]">...</h1>

レイアウト(Layout)

コンテナ(Container)

container
{breakpoint}:container

カラム(Columns)

columns-{1,2,3,4,5,6,7,8,9,10,11,12}
columns-{auto,xs,2xs,3xs}
columns-{sm,md,lg,xl,{2,3,4,5,6,7}xl}

ボックスサイジング(Box Sizing)

box-{border,content}

ディスプレイ(Display)

block
inline
inline-{block,flex,grid,table}
flex
grid
contents
list-item
hidden
table
table-{caption,row,cell,column,column-group,header-group,footer-group,root}
flow-root

ポジション(Position)

static
fixed
absolute
relative
sticky

上下左右(Top/Right/Bottom/Left)

{top,right,bottom,left,start,end}-auto
{top,right,bottom,left,start,end}-{length}
{top,right,bottom,left,start,end}-{percentage}
inset-auto
inset-{length}
inset-{percentage}
inset-{x,y}-auto
inset-{x,y}-{length}
inset-{x,y}-{percentage}

ビジビリティ(Visibility)

visible
invisible
collapse

オーバーフロー(Overflow)

overflow-{auto,hidden,clip,visible,scroll}
overflow-{x,y}-{auto,hidden,clip,visible,scroll}

Zインデックス(Z-Index)

z-{0,10,20,30,40,50,auto}

フレックスボックスとグリッド(Flex & Grid)

フレックス(Flex)

flex-1         # flex: 1 1 0%;
flex-auto      # flex: 1 1 auto;
flex-initial   # flex: 0 1 auto;
flex-none      # flex: none;

使用例を示します。

<div class="flex gap-4">
  <div class="flex-1">...</div>
  <div class="flex-1">...</div>
</div>

フレックス方向(Flex Direction)

flex-{row,row-reverse,col,col-reverse}

グリッド(Grid)

grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}
grid-cols-none
grid-cols-subgrid

使用例を示します。

<div class="grid grid-cols-3 gap-4">
  <div class="border">AAA</div>
  <div class="border">BBB</div>
  <div class="border">CCC</div>
</div>

フレックス・グリッドアライン(Flex & Grid Align)

justify-{normal,start,end,center,between,around,evenly,stretch}            # justify-content: *
justify-items-{start,end,center,stretch}                                   # justify-items: *
justify-self-{auto,start,end,center,stretch}                               # jusfity-self: *
content-{normal,center,start,end,between,around,evenly,baseline,stretch}   # align-content: *
items-{start,end,center,baseline,stretch}                                  # align-items: *
self-{auto,start,end,center,stretch,baseline}                              # align-self: *
place-content-{center,start,end,between,around,evenly,baseline,stretch}    # place-content: *
place-items-{start,end,center,baseline,stretch}                            # place-items: *
place-self-{auto,start,end,center,stretch}                                 # place-self

ギャップ(Gap)

gap-{length}
gap-{x,y}-{length}

サイジング(Sizing)

高さ(Height)

h-{auto,full}               # auto,100%
h-{min,max,fit}             # min-content,max-content,fit-content
h-{screen,svh,lvh,dvh}      # 100vh,100svh,100lvh,100dvh
h-{length}
h-{1/2,{1,2}/3,{1,2,3}/4,{1,2,3,4}/5,{1,2,3,4,5}/6}

横幅(Width)

w-{auto,full}               # auto,100%
w-{min,max,fit}             # min-content,max-content,fit-content
w-{screen,svw,lvw,dvw}      # 100vw,100svw,100lvw,100dvw
w-{length}
w-{1/2,{1,2}/3,{1,2,3}/4,{1,2,3,4}/5,{1,2,3,4,5}/6}
w-{1,2,3,4,5,6,7,8,9,10,11}/12

最大高さ(Max Height)

max-h-{length}
max-h-{min,max,fit}         # min-content,max-content,fit-content
max-h-{none,full}           # none, 100%
max-h-{screen,svh,lvh,dvh}  # 100vw,100svw,100lvw,100dvw

最大横幅(Max Width)

max-w-{length}
max-w-{none,full}           # none, 100%
max-w-{min,max,fit}         # min-content,max-content,fit-content
max-w-prose                 # 65ch
max-w-{xs,sm,md,lg,xl,2xl,3xl,4xl,5xl,6xl,7xl}
max-w-screen-{sm,md,lg,xl,2xl}

最小高さ(Min Height)

min-h-{length}
min-h-full                  # 100%
min-h-{screen,svh,lvh}      # 100vw, 100svh, 100lvh
min-h-{min,max,fit}         # min-content,max-content,fit-content

最小横幅(Min Width)

min-w-{length}
min-w-full                  # 100%
min-w-{min,max,fit}         # min-content,max-content,fit-content

余白(Spacing)

パディング(Padding)

p-{length}
p{x,y,t,r,b,l}-{length}

マージン(Margin)

m-auto
m{x,y,s,e,t,r,b,l}-auto
m-{length}
m{x,y,t,r,b,l}-{length}
-m-{length}
-m{x,y,t,r,b,l}-{length}

テキスト(Text)

テキスト色(Text Color)

text-{inherit,current,transparent}
text-{black,white}
text-{color}-{density}

フォントサイズ(Font Size)

text-base
text-{xs,sm,lg,xl}
text-{2,3,4,5,6,7,8,9}xl

text-base/{3,4,5,6,7,8,9,10}
text-base/[{number}px]

ラインの高さ(Line Height)

leading-{3,4,5,6,7,8,9,10}          # line-height: 0.25rem * n
leading-none                        # line-height: 1;
leading-tight                       # line-height: 1.25;
leading-snug                        # line-height: 1.375;
leading-normal                      # line-height: 1.5;
leading-relaxed                     # line-height: 1.625;

フォントファミリ(Font Family)

font-{sans,serif,mono}

フォントの太さ(Font Weight)

font-{thin,xtralight,light,normal,medium,semibold,bold,extrabold,black}

フォントスタイル(Font Style)

italic
not-italic

テキストの整列(Text Align)

text-{left,center,right,justify}
text-{start,end}

ホワイトスペース(Whitespace)

whitespace-{normal,nowrap,pre,pre-line,pre-wrap,break-spaces}

リスト(List)

リストスタイル(List Style)

list-none
list-disc
list-decimal

テーブル(Tables)

ボーダーコラプス(Border Collapse)

border-collapse
border-separate

ボーダースペーシング(Border Spacing)

border-spacing-{length}
border-spacing-{x,y}-{length}

使用例を示します。

<table class="border border-separate border-spacing-2">
  <tr>
    <td class="border">AAA</td>
    <td class="border">BBB</td>
  </tr>
</table>

背景(Background)

背景の色(Background Color)

bg-{inherit,current,transparent}
bg-{black,white}
bg-{color}-{density}

背景グラデーション(Background Gradient)

bg-none
bg-gradient-to-{t,tr,r,br,b,bl,l,tl}

下記の様に使用します。

<div class="bg-gradient-to-r from-sky-400 to-sky-100">...</div>

ボーダー(Border)

ボーダーの太さ(Border Width)

border                                 # border: 1px
border-{0,2,4,8}                       # border: npx
border-{x,y,s,e,t,r,b,l}
border-{x,y,s,e,t,r,b,l}-{0,2,4,8}

ボーダーの色(Border Color)

border-{inherit,current,transparent}
border-{black,white}
border-{color}-{density}

ボーダースタイル(Border Style)

border-{solid,dashed,dotted,double,hidden,none}

ボーダーの角丸(Border Radius)

rounded
rounded-{none,full,md,lg,xl,2xl,3xl}
rounded-{s,e,t,r,b,l}
rounded-{s,e,t,r,b,l}-{none,full,sm,md,lg,xl,2xl,3xl}
rounded-{s,e}{s,e}-{none,full,sm,md,lg,xl,2xl,3xl}
rounded-{t,b}{r,l}-{none,full,sm,md,lg,xl,2xl,3xl}

エフェクト(Effect)

透明度(Opacity)

opacity-{0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100}

ボックスシャドー(Box Shadow)

shadow
shadow-inner
shadow-none
shadow-{sm,md,lg,xl,2xl}

ボックスシャドーの色(Box Shadow Color)

shadow-{inherit,current,transparent}
shadow-{black,white}
shadow-{color}-{density}

フィルタ(Filter)

ぼかし(Blue)

blur
blur-none
blur-{sm,md,lg,xl,2xl,3xl}

アニメーション(Animation)

animate-{none,spin,ping,plus,bounce}

下記は読み込み中の点滅やスピンを表示するサンプルです。

<div class="flex justify-center" aria-label="読み込み中">
  <div class="animate-ping h-4 w-4 bg-blue-600 rounded-full"></div>
</div>

<div class="flex justify-center">
  <div class="animate-spin w-10 h-10 border-4 border-blue-500 rounded-full border-t-transparent"></div>
</div>

トランジション(Transition Property)

transition
transition-{none,all,colors,opacity,shadow,transform}

下記はマウスを乗せるとゆっくりと色を変化させるサンプルです。

<button class="transition hover:opacity-60 bg-blue-400 px-4 py-2 rounded">Button</button>

スケール(Scale)

scale-{0,50,75,90,95,100,105,110,125,150,}
scale-{x,y}-{0,50,75,90,95,100,105,110,125,150}

ローテート(Rotate)

rotate-{0,1,2,3,6,12,45,90,180}

トランスレート(Translate)

translate-{x,y}-{length}
translate-{x,y}-{percentage}

インタラクティブ(Interactive)

カーソル(Cursor)

cursor-{auto,default,none}
cursor-{pointer,wait,text,move,help,not-allowed,content-menu,progress}
cursor-{cell,crosshair,vertical-text,alias}
cursor-{copy,no-drop,grab,grabbing,all-scroll,zoom-in}
cursor-{{col,row}-resize,{n,e,s,w,ne,nw,se,sw,ew,ns,nesw,nwse}-resize}

リサイズ(Resize)

resize
resize-{none,x,y}

リンク

https://tailwindcss.com/ (本家サイト)
https://tailwindcss.com/docs/installation (本家ドキュメント)
https://tailwindcomponents.com/cheatsheet/ (チートシート)

初版:2024年2月11日最終更新:2024年2月11日

http://www.tohoho-web.com/ex/tailwind.html