最近流行りのtailwindを使用してみました。
一度も使ったことないですが、Shopifyとの相性が良いのか確認してみました。
Tailwind概要
tailwindは他の紹介サイトなどによるとユーティリティクラスの詰め合わせとよく言われています。
button {
border: 1px solid rgb(15 23 42);
padding: 1rem; /* 16px */
background-color: rgb(241 245 249);
border-radius: 0.25rem; /* 4px */
}
とcssで書く場合、
<button class ="border border-solid border-slate-900 p-4 bg-slate-100 rounded">btn</button>
みたいに書きます。
メリット
コンポーネントフレンドリー
ユーティリティクラスだけで多くのことを実行できますが、プロジェクトが大きくなるにつれて、一般的なパターンをより高いレベルの抽象化に体系化すると便利な場合があります。
Tailwindは、繰り返されるユーティリティパターンからコンポーネントクラスを抽出するためのツールを提供し、コンポーネントの複数のインスタンスを1か所から簡単に更新できるようにします。
公式サイトからの引用ですが、コンポーネントごとに管理するのに優れているよといことです。
<!-- Using utilities: -->
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
Button
</button>
このように書くところを、
<!-- Extracting component classes: -->
<button class="btn btn-blue">
Button
</button>
<style>
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn-blue {
@apply bg-blue-500 text-white;
}
.btn-blue:hover {
@apply bg-blue-600;
}
</style>
こんな感じで書けるので、便利だよってことですね。
Shopifyであれば、sectionごとにかけるので管理しやすいですね。今回自分が作ったものは使用していないですが、複数人で作業する場合は良い機能だと思います。
レスポンシブ対応
すべてのTailwindユーティリティにはレスポンシブバリアントも付属しているため、カスタムCSSを使用せずにレスポンシブインターフェイスを非常に簡単に構築できます。
Tailwindは、直感的な{screen}:プレフィックスを使用して、元のクラス名を認識可能でそのまま維持しながら、マークアップ内のレスポンシブクラスに簡単に気付くことができます。
まあ、簡単にレスポンシブが書けて、レスポンシブを書く場合でも元のクラス名を維持するので分かりやすいねってことです。
書いてみた感じは特に他のフレームワークに比べて書きやすいってことはなく、よくある感じの書き方です。
ローカル環境の準備
ローカル環境は以下の記事をそのまま使用しました。
実際作成したもの
PC表示
SP表示
Downをベースにindexに表示するセクションのみ作成しました。
作成したsectionは以下のみです。きまぐれで更新はするかもしれないです。
announcement-bar.liquid
articles.liquid
feature.liquid
footer.liquid
header.liquid
hello.liquid
promo.liquid
使用したツールやサイト
ドキュメント
初めて使用するので、クラス名がわからないので公式のドキュメントを参考にしました。
UI components
公式のコンポーネントサンプルです。有料のものが多いですが、Ecommerce向けのコンポーネントは結構無料で使用できます。
ここで大体必要なコンポーネントは揃っていると思います。
ここからも一部使用しました。
prefixer
コンポーネントをコピペする際prefixを追加したいのでこのサイトを使用していました。
Js
クリックでクラスを付与したりなどJqueryでやろうかと思いましたが、気になっていたのでAlpine.jsを使ってみました。
使いやすいと思います。
感想
良かった点
実際sectionをコンポーネントから探してきたコードをペタペタ張って、テーマカスタマイズから変更したい箇所をスキーマに書いて変更していくだけで、レスポンシブのそれっぽいものができてしまうので開発は早いと思います。
修正の際、ほかのsectionに干渉してデザインが崩れる心配が少ないのもよかったです。
またプレフィックスを設定できるので既存テーマに干渉しないことなどにより、既存テーマの大体と親和性が高いと思います。
使用しなかったですが@applyを使用することで管理が楽になるなど相性は悪くないかと思います。
良くなかった点
初めて触ったのでということでもありますが、クラス名を探すのに時間がかかってしまいました。
コンポーネントをそのまま使用する場合は早いですが、1から作ろうとすると普通にCSSを書いたほうが早いなと個人的に思いました。
また、web標準の方向性とあっていないので将来的に保守が難しくなっていくのではないかなとか思いました。
まとめ
Shopifyのテーマとの親和性は悪くないとは思います。そこそこの人数でテーマ開発を行う場合は悪くない選択肢ではあると思いますが、個人で使用するには普通にCSSを自分で書いたほうが楽かなと思いました。
自分が使いこなせてない感は否めないですが、公式も公式ではないツールやサイトが優秀だったので技術選定の際選択肢に入れるのはなしではないかなという感じです。