2020年12月6日

プログラミング

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

目次

  1. はじめに
  2. Tailwind CSSとは
  3. Tailwind BuilderでReactのコードに書き出してみる
  4. まとめ

はじめに

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

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

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

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

Tailwind CSSとは

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

スクリーンショット 2020-12-06 10.38.53.png (872.8 kB)

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

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

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

<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-lgfont-semiboldというクラスが当たっています。
それぞれドキュメントから検索してみましょう。
font-semiboldにはfont-weight: 600;text-lgには font-size: 1.125rem; line-height: 1.75rem;がそれぞれ定義されています。

 2020-12-06 15.34.03.png (17.7 kB)

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

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

このようなスタイルを適用したい場合、通常ですと text-lgfont-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を使ってみましょう!
 2020-12-06 16.06.33.png (165.8 kB)

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

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

今回はこのようなWebサービスの料金プランのようなものを作ってみました。
 2020-12-06 16.12.44.png (267.3 kB)

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

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

 2020-12-06 17.12.36.png (278.0 kB)

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

早速動かしてみましょう。
 2020-12-06 17.09.19.png (275.5 kB)

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


<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"> では containerpx-4mx-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のプラグイン を使用することでだいぶ解決できそうです。
intellisense.0bd2cbf8c277e6c1330e345ab3cd7684.png (39.5 kB)

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

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

Reactのお仕事に関するご相談

Bageleeの運営会社、palanではReactに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

1

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

かっきー

かっきー

きうち

きうち

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

CONTACT PAGE TOP