tailwind.cssでhello,world!

admin

6か月前

styleタグもCSS定義ファイルは使わずに、クラス指定でスタイル指定するのが斬新！

ToDoアプリの見た目を、tailwind.cssで整える。

レスポンシブでhello,worldを表示してみる。
tailwindは、css定義ファイルは使わずに、クラス指定でスタイル指定するのが斬新！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Hello World with Tailwind CSS</title>
    <!-- Tailwind CSSのCDNリンク -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@^2.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-200 flex justify-center items-center h-screen">
    <h1 class="text-2xl font-bold">Hello, World!</h1>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Simple Hello World with Tailwind CSS</title>

</head>

<h1 class="text-2xl font-bold">Hello, World!</h1>

</body>

</html>

class属性の順番は、特に関係ない。

こういう感じで、色々な指定と組み合わせを覚える必要がある。一度には無理なのでちょっとずつ慣れていくしか無いね。

bg-gray-200: 背景色を灰色のトーン200に設定します。
flex: フレックスボックスモデルをこの要素に適用し、子要素をフレックスアイテムとして扱います。
justify-center: フレックスアイテムを水平方向の中央に配置します。
items-center: フレックスアイテムを垂直方向の中央に配置します。
h-screen: 要素の高さをビューポートの高さに合わせます。

text-2xl: テキストサイズを大きくします。
font-bold: テキストを太字にします。

背景色の指定は、bg-色の名前-番号(50から950まで) という事？
https://tailwindcss.com/docs/background-color

マージン(周りの余白)
mt-2

m = margin(全四辺)
mt = margin-top
mb = margin-bottom
mr = margin-right
ml = margin-left
mx = margin-x軸(leftとright)
my = margin-y軸(topとbottom)

paddingも同じ、pt-2だとpadding top 2*4pixel

bg-blue-500 hover:bg-blue-700
ボタンなどマウスオーバーされたら、ボタンの色を変える。

関連記事