2020年12月6日
プログラミング
Tailwind BuilderでReactのコードを出力しながらTailwind CSSを学んでみる
はじめに
新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay6です!
昨日は「Blitz.jsとTailwind CSSでメモ帳アプリの作成【第1弾】」という記事でした!
今回は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="...">
他にも dark:bg-gray-800
といった形でダークモードにも対応しやすくなりますし、focus:outline-none
というようにhoverやfocusといった擬似クラスへの対応も可能です。
Tailwind Builderから書き出してみる
それでは、Tailwind CSSをローコードでReactコードに書き出し可能なTailwind Builderを使ってみましょう!
使い方は以前ご紹介した、Material-UI Builderとほぼ同じです。
今回はこのような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="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サイトが構築できるので、ぜひ試してみてください!
Reactのお仕事に関するご相談
Bageleeの運営会社、palanではReactに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか?
1
0
関連記事
2022年5月13日
Reactでオセロゲームを作る
2021年4月9日
Slack OAuth x React で Slack ユーザー認証を作ってみた!
2021年3月1日
Reactで使えるバリデーションライブラリを紹介!
2021年2月22日
Hasura Cloud × Auth0 × React でお手軽にTodoアプリを作ってみた!
2020年12月12日
Blitz.jsとTailwind CSSでメモ帳アプリの作成【第2弾】
2020年12月8日
コンポーネントを実装するときに意識すること
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへpalanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー
Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。
やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。
はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。
ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。
Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。
ゲスト bagelee
かっきー
まりな
suzuki
miyagi
ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。
いわもと
デザイナーをしています。 好きな食べ物はラーメンです。
taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。
kubota shogo
サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!
nishi tomoya
aihara
グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。
nagao
SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。
Kainuma
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
sugimoto
asama
ando
iwasawa ayane
yoko oshimo
異業界からやってきたデザイナー。palanARのUIをメインに担当してます。これからたくさん吸収していきます!