目次
Hello Tailwindを出力
テキストエディタに入力していきます。
ソースコード
- <!doctype html>
- <html>
- <head>
- <!-- ... -->
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <link href="dist/tailwind.css" rel="stylesheet">
- <!-- <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> -->
- </head>
- <body>
- <div class="container mx-auto px-4">
- <div class="box-border h-50 w-90 p-4 border-4">
- <h1 class="text-5xl text-pink-300 text-center font-semibold">Hello Tailwind</h1>
- </div>
- </div>
- </body>
- </html>
解説
.mx-autoを使い、コンテナを中央に配置します。
要素（外枠とh1）をdivで囲み、.mx-autoを使い、コンテナを中央に配置にします。
コンテナを中央に配置するには、.mx-autoユーティリティを使用します。
公式サイトから引用：https://tailwindcss-ja.entap.app/docs/container
mx-autoは左右のmarginを自動で調整してくれます。
左右同じようにmarginを揃えてくれるので、結果的に央揃えになります。
水平方向のパディングを追加するには、
公式サイトから引用：https://tailwindcss-ja.entap.app/docs/container.px-{size}ユーティリティを使用します。
.px-でコンテナの内側に4px、横方向にパディングをとります。
- xはx軸（横）
- pはpaddingのp
- mはmarginのm
ボックスサイジング
box-borderでh1を囲みます。
- h-で高さを指定
- w-で横幅を指定
- pでpaddingを指定
- border-で境界線の太さを指定
今回は目分量で設定してしまいましたが、公式サイトに「要素の高さを設定するためのユーティリティ」について説明されていますので、詳しくはそちらをご確認ください。
見出し（h1）の装飾
text-でフォントサイズを指定します。
- text-5xlは、font-size: 3rem、line-height 1rem になります。
- text-pink-300は ＃F9A8D になります。
- text-centerは 文字を中央揃えにします。
- font-semiboldは font-weight: 600になります。
参考URL
- Tailwindcss公式サイト
- Tailwindcss公式サイト コンテナ
- Tailwindcss公式 ボックスサイジング
- Tailwindcss公式 色のカスタマイズ
- Tailwindcss公式 要素の高さを設定するためのユーティリティ
GoogleChromeの検証モードで表示を確認します。
PCサイズで表示
タブレットサイズで表示（iPad Pro）
スマートフォンサイズ（iPhoneX）
