tailwind PLAYで遊んでみた

tailwind PLAYとは、一口で言うと、
tailwindの機能を簡単に再現、お試しできる ものではないでしょうか。
tailwindPLAY

2020/10/07にtailwindBLOGにて以下の様な内容が書かれていました。

カスタマイズするにはtailwind.config.jsをいじる必要があるよね。
もしこれからtailwindを使用するなら、postcssを用いたローカル環境セットアップするか、CDNを使用する必要があるよ。でもそれじゃかっこいい機能(@applyや@variants, @responsiveなど)は使用できないよ。

Tailwind Playを使用すれば、ブラウザで直に設定された内容を確認することができるよ(セットアップしなくてもどのように反映されるかがわかるよ)。

また、主な特徴として7つ挙げられていました。

Tailwind Themeのカスタマイズ
group-hoverやfocus-withinの様な、特殊なvariantsを使用できる
@applyや@variants、@responsiveなどのカスタムディレクティブを使用できる
@tailwindcss/typographyなどのプラグインを導入できる
コードリンターと補完がしっかりしている
レスポンシブモードが使用可能
1クリックで共有ができる

私は好奇心に駆られ、さっそくいじってみることにしました。

cardコンポーネント

軽くカードコンポーネントを作成してみました。
tailwind_card_components

tailwind.config.jsではcontainer設定を変更しています。
その他は適当にクラスを入れ込んでいます。

tailwindのみで作成できるのはとても簡単で良いですね。

focus-withinフォーム

先ほど特徴として、focus-withinを使用できると書きました。早速使用してみましょう。
tailwind_using_focus-within

borderColorにfocus-withinが使用できる様に設定して、試してみましたが、しっかり反映されています。

共有できるってどういうこと？

以上のサンプルもShareボタンを押して生成されたものです。
押すとスナップショットを作成されURLが生成されます。そこにアクセスすることで共有できる様になります。

感想

環境構築は確かに面倒です。
PLAY、名前の通り軽く触ってすぐに確かめるにはもってこいだな、と感じました。

これからバージョンも変化していくでしょう。なにがくるか楽しみです。

みなさんも使ってみてください。