Tailwindを最大限に活用するには、ビルドステップが必要です。これは、tailwind.config.jsファイルをカスタマイズしたり、@applyでコンポーネントを抽出したり、プラグインを含めたりするための唯一の方法です。
すでにフレームワークを導入している場合は問題ありませんが、初めて試してみようとする場合は、多くの摩擦があります。PostCSSサポートを備えたローカル開発環境をセットアップするか、静的なCDNビルドに固執する必要があり、これは多くの優れた機能を活用できないことを意味します。
そこで本日、Tailwind CSSの高度なオンラインプレイグラウンドであるTailwind Playの最初のバージョンをリリースできることを嬉しく思います。これにより、ブラウザ上でTailwindのすべてのビルド時機能を直接使用できます。
これには、Tailwindの最もクールな機能のすべてに加えて、エディターよりもTailwind Playでさらに優れている多くの機能が含まれています。例：
- Tailwindテーマのカスタマイズ
- 特殊なバリアント（
group-hoverやfocus-withinなど）の有効化 - CSSで
@apply、@variants、@responsiveなどのカスタムディレクティブの使用 @tailwindcss/typographyなどのプラグインの追加- インテリジェントなコード補完とlinting
- レスポンシブデザインモード
- ワンクリック共有
コード補完は、レンダリングされたプレビューをリアルタイムで更新するため、ブラウザで信じられないほどのデザインワークフローが生まれます。たとえば、矢印キーでさまざまなパディングユーティリティをナビゲートするだけで、ファイルを保存したり、Enterキーを押したりすることなく、最適な値を見つけることができます！
ビューポートを微調整できるレスポンシブデザインモードは、Chrome DevToolsと同様の操作感です。ビューポートを使用可能なスペースを超えてドラッグすることもでき、プレビュー領域は自動的にズームアウトするため、限られたスペースしかない場合でも、より大きな画面向けに設計できます。
ワンクリック共有はまさにそのとおりです。アカウントを作成する必要さえありません。「共有」をクリックすると、オンラインで共有できる作業中のスナップショットへのリンクがすぐに取得できます。
play.tailwindcss.comをチェックして、感想をお聞かせください！
この記事について話し合いたいですか？ GitHubで議論する →