🎨

Tailwind Playでインタラクティブにデザインを構築する

2020/10/08に公開

CSS

昨日（2020/10/07) Tailwind CSS からリリースされた Tailwind Play がとても良かったので紹介します。
Tailwind CSS を使うなら触っておいて損はないと思います。

Tailwind Playとは？

https://play.tailwindcss.com/

Tailwind CSS のインタラクティブなコーディングが行える Web サイトです。
見た目・機能としては、Code Pen や TypeScript Playground が近いですかね。
左ペインのエディタで書いた内容が右ペインの表示にインタラクティブに反映されます。そして、追加の CSS や Tail Wind の Config の設定も自由行えます。

詳細は、サイトにアクセスするか以下紹介動画をみてもらえればわかるのですが、次項以降で特に良いなと思ったポイントを紹介します。

tailwind CSS のコード補完が行える

専用エディタだけあって当たり前ですが、Tailwind CSS のコード補完が行えます。class にカーソルを移動して何か入力すると補完候補のポップアップが表示されます。
正直 Tailwind CSS の無数にある Class を覚えてないのでこれがあるだけでとても書きやすいです。
VSCode でも同様のプラグインがあるのですが、Web エディタでインタラクティブに使えるのが良いですね。

config, CSSの設定が自由に行える

tailwind.config.js と CSS ファイルの設定を変えて、自分のプロダクトに合わせた環境でのテストが行えます。
config の設定をかえるとブラウザ上でビルドが走るようです。CodePen では出来なかったことなので嬉しいですね。

plugin を自由に追加できる

ここが一番驚いたのですが、config の plugin の欄に追加したい Plugin を書くと、ファイルのロードが始まりエディタ上でその Plugin を使うことが出来るようになります！
本来は、ローカルで npm の設定をして始めなければ出来ないことが、即試せるので最高ですね。

レスポンシブにレイアウトを確認できる

Chrome DevTools を使わずに、ボタンクリックでレスポンシブなレイアウトを確認出来ます。
今のサイトだと、レスポンシブデザインが当たり前なのでこの機能も地味に便利ですね。

これはかなり可能性のある機能だと思うのですが、TypeScript Playground ライクにワンクリックで編集内容をシェア出来ます。

終わりに

以上、「Tailwind Play でインタラクティブにデザインを構築する」でした！
これを使えば Tailwind を試すハードルがかなり下がりそうです。
Tailwind のエコシステムがどんどん進化していて凄い。今後にも期待です。