Tailwind BuilderでReactのコードを出力しながらTailwind CSSを学んでみる

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay6です！

昨日は「Blitz.jsとTailwind CSSでメモ帳アプリの作成【第１弾】」という記事でした！

Blitz.jsとTailwind CSSでメモ帳アプリの作成【第１弾】

今回はTailwind Builderというサービスを使い、Tailwind CSSベースのReactコードを書き出してみます。
2日連続でのTailwind CSSがテーマですが、それほど注目されている技術の為、どういった特徴があるか含め解説していきます。

Tailwind CSSとは

Tailwind CSSとは Adam Wathan氏らによって開発されている、ユーティリティファーストなオープンソースのCSSです。

ユーティリティファーストとは

ユーティリティファーストは意訳すると使い勝手を一番に！といったような意味でしょうか。
どういうことか実例をお見せしていきます。

公式のサンプルの一部から解説していきましょう。

<p class="text-lg font-semibold">
  “Tailwind CSS is the only framework that I've seen scale
on large teams. It’s easy to customize, adapts to any design,
and the build size is tiny.”</p>

こちらは簡単なpタグによる文章ですが、クラスでtext-lgとfont-semiboldというクラスが当たっています。
それぞれドキュメントから検索してみましょう。
font-semiboldにはfont-weight: 600;、text-lgには font-size: 1.125rem; line-height: 1.75rem;がそれぞれ定義されています。

※ 公式ドキュメント で検索した結果

これのどこがユーティリティファーストなの？と思うかもしれませんが、こういったスタイルを個別に定義することなくTwailind CSSのクラスを付与するだけで自由なレイアウトが実現できます。

このようなスタイルを適用したい場合、通常ですと text-lg やfont-semiboldをCSSで個別定義する必要があります。
また、場合によってはp要素に直接スタイルを当てたり、top-text などクラスをつけ、font-weightとfont-size、line-heightを全て適用するかもしれません。
分かりづらいかもしれませんが、原則Tailwind CSSでは1つのクラスに複数の役割をもたせることはしません。

一般的な Bootstrap をはじめとしたCSSフレームワークでは、1つのクラス（例えばbtnやnavbarなど）に複数の役割（レイアウトやテキスト位置など）を持たせます。
クラスがシンプルになる一方、フレームワークのレイアウトを逸脱する際にスタイルを上書き（オーバーライド）する必要がありました。
こうしてオーバーライドが増えるにつれ、フレームワークを逸脱した多くの独自クラスが産まれ、CSSが複雑になるという問題が発生していました。

Tailwind CSSでは、複雑なレイアウトを実現する際には多くのクラスを付与する必要がある一方、クラスを当てるだけでレイアウトを自由に構築することができたり、HTMLの構造に依存しないスタイルを当てることができます。

また、レスポンシブデザインについても、ブレイクポイントごとの定義をすることで容易に実現可能です。
<img class="w-16 md:w-32 lg:w-48" src="/programming/tailwind-builder/.../">

他にも dark:bg-gray-800 といった形でダークモードにも対応しやすくなりますし、focus:outline-none というようにhoverやfocusといった擬似クラスへの対応も可能です。

Tailwind Builderから書き出してみる

それでは、Tailwind CSSをローコードでReactコードに書き出し可能なTailwind Builderを使ってみましょう！

使い方は以前ご紹介した、Material-UI Builderとほぼ同じです。

Material-UI BuilderでReactコンポーネントをローコードで作る！

今回はこのようなWebサービスの料金プランのようなものを作ってみました。

右上のエクスポートボタンからReactコードにしてみましょう！

エクスポートされたファイルはこのようになっています。

基本はpublic/index.html内でクラスを指定しているだけで、ほぼ再現ができています。
一部 src/tailwind/tailwind.config.js でテーマの設定などもされているようです。

早速動かしてみましょう。

良い感じに再現されています！
全てのコードを見ていくのは大変なので、ヘッダーのロゴ、ログインと登録ボタンの部分だけ見ていきましょう。

<section>
<div class="container px-4 mx-auto">
<nav class="flex items-center py-6">
            <a class="text-3xl font-semibold leading-none" href="#"><img class="h-10" src="/programming/tailwind-builder/metis-assets/logos/metis/metis.svg" alt="" width="auto"></a>
<div class="ml-auto"><a class="mr-2 inline-block px-4 py-3 text-xs text-blue-600 hover:text-blue-700 font-semibold leading-none border border-blue-200 hover:border-blue-300 rounded" href="#">Log In</a><a class="inline-block px-4 py-3 text-xs font-semibold leading-none bg-blue-600 hover:bg-blue-700 text-white rounded" href="#">Sign Up</a></div>
</nav></div>

例えば <div class="container px-4 mx-auto"> では container 、px-4、mx-auto が当たっており、それぞれwidth100%のcontainer、padding、marginの設定がされています。

また次の行では、flex item-center でflexboxのコンテナー内のアイテムの配置、py-6でpaddingの設定がされています。
分かりづらいflexboxについても直感的なクラス名で簡単に実装しレイアウトが組めますね！

まとめ

今回はTailwindのざっくりとした概要、またそれを簡単にローコードで組むことができるTailwind Builderのご紹介をしました。
ユーティリティファーストのTailwind CSSですが、使ってみてこれらの難しさはあると感じました。

・本当に 細かくクラス名が定義されている為、（直感的とはいえ）慣れたり覚えたりするのに時間が必要
・1つの要素に対し付与するクラス数が多くなりがち（10個以上つけるケースも）でHTMLが冗長になる
・（理想はわかるけど）HTMLの構造とスタイルを紐付けたいこともある

もちろん慣れや例えば Visual Studio Codeのプラグイン を使用することでだいぶ解決できそうです。

また @apply を使うことで複合クラスを定義するなども可能なので、冗長問題やある程度のHTML構造に依存するクラスの追加なども解決しそうです。

そしてTailwind Builderを使用することで、簡単にローコードでReactベースのTailwind CSSのWebサイトが構築できるので、ぜひ試してみてください！