とりあえず流行ってるTailwind CSSを使ってみた｜DAD UNION

何だか流行ってるTailwind CSSを使ってみました。
正直この記事を書きながらとりあえずTailwind CSSってなんだろうってところからやってます。

Contents

Tailwind CSSとは
CDNでtailwind.min.cssファイルを読み込み
Tailwind CSSを使ったHTMLの記述
とりあえず流行ってるTailwind CSSを使ってみたデモページ
とりあえず流行ってるTailwind CSSを使ってみた感想

Tailwind CSSとは

Tailwind CSSサイトより、

「Tailwind CSSは高度にカスタマイズ可能な低レベルのCSSフレームワークであり、オーバーライドするために戦わなければならない煩わしい独善的なスタイルなしに、オーダーメイドのデザインを構築するために必要なすべてのビルディングブロックを提供します。」とのことで、勝手に解釈すると「CSSの記述方法は簡単だけど高度なことは出来て、複雑な独自のCSSファイル作らなくても、いい感じのデザインが出来るよ」ってことですかね。

CDNでtailwind.min.cssファイルを読み込み

※今回はとりあえずでやってるのでtailwind.min.cssファイルを読み込むだけです。

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

　
自作のコンポ―ネントを作る場合はnpmでインストールする必要があります。
インストール – Tailwind CSS

Tailwind CSSを使ったHTMLの記述

※classにフォントサイズ、太さ、位置を記述するだけで済ませようってことなんですね。

<h1 class="text-3xl text-green-700 text-center pt-10 text-ejcorp">とりあえず流行りのTailwind CSSを使ってみた</h1>

<div class="text-center mt-10">
<button class="bg-indigo-700 font-semibold text-white py-2 px-4 rounded">ボタン</button>
</div>

<div class="text-center mt-10">
    <p class="text-xs font-thin">テキスト</p>
    <p class="text-sm font-extralight">テキスト</p>
    <p class="text-base font-light">テキスト</p>
    <p class="text-lg font-normal">テキスト</p>
    <p class="text-xl font-medium">テキスト</p>
    <p class="text-2xl font-semibold">テキスト</p>
    <p class="text-3xl font-bold">テキスト</p>
    <p class="text-4xl font-extrabold">テキスト</p>
    <p class="text-5xl font-black">テキスト</p>
    <p class="text-6xl">テキスト</p>

  <div class="group m-10 p-10 border hover:bg-gray-100">
    <p class="text-3xl font-black group-hover:text-red-900">マウスオーバーで色が変わります。</p>
  </div>
</div>

　
classへの記述方法は、
Tailwind Cheat Sheeet
を参考にして下さい。

とりあえず流行ってるTailwind CSSを使ってみたデモページ

とりあえず流行ってるTailwind CSSを使ってみた感想

なんだか流行ってるTailwind CSSを使ってみて1時間位ですが、多分会社や個人独自のstyleやcss記述から脱却してもう全部htmlタグのclassに全部追記して、マークアップ的に皆共通にする方向に動いてるんですかね。プロジェクトとかでclass名の命名規則考えたりするのも面倒ですし。

　

※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。