メサイア・ワークス

tailwind.cssでhello,world!

tailwind.cssでhello,world!

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

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

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

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
ボタンなどマウスオーバーされたら、ボタンの色を変える。

モバイルバージョンを終了