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、名前の通り軽く触ってすぐに確かめるにはもってこいだな、と感じました。
これからバージョンも変化していくでしょう。なにがくるか楽しみです。
みなさんも使ってみてください。