Tailscan for Tailwind CSS

中心にあるのは、ページから離れずに済むという考え方だ。要素にカーソルを合わせて Tailwind クラスを見て、スペースキーで固定し、デザインがリアルタイムに変わるのを見ながらクラスを追加、編集、非表示にする。変更は要素ごとに保持されるため、気軽に試して、終わったら編集をまとめてコピーできる。保存とリロードの往復を嫌う人にとって、これがこのツールを買う理由になる機能だ。

バージョン 3 では、自然言語のリクエストを Tailwind の変更に変換する AI パネルが加わった。「このボタンをもっと大きく、角を丸く」と入力すればクラスが自動で適用され、見えるユーティリティとして残すことも選べる。変更をきれいなコードや再利用できるプロンプトとして書き出せるので、同じスタイルをプロジェクト全体に広げられる。難点は使用量の上限で、プランは月 1000 回の AI リクエストを許容し、それを超えるとその月の残りは安価なモデルに切り替わる。

ワンクリックで要素を Tailwind コンポーネントに変換できる。Tailscan はどんなサイトのどんな要素でも、再利用できる Tailwind CSS コンポーネントに変える。つまり気に入ったカードやナビバー、ボタンを取って変換し、クラスごとに書き直す代わりにマークアップを自分のプロジェクトへ持ち込める。確認を作業の成果に変える部分であり、自分のものではないサイトで使われる理由でもある。

ビルドが消してしまうものを含め、任意値を使うクラスまで、どんな Tailwind クラスとバリアントでも追加できる。自分の Tailwind 設定を持ち込めばテーマ拡張がすぐ反映され、候補が標準の Tailwind ではなく自分のプロジェクトに合う。カスタムのスケールに頼るチームにとって、この点は大きい。標準値しか知らないインスペクターは、彼らにはすぐ使えなくなる。

Tailscan はブラウザの開発者ツールに組み込まれる。開発者ツールのパネル内でクラスを編集でき、ネイティブの要素選択も使え、入力するそばからクラスがコンパイルされる。オートコンプリートが正しいクラスを提案し色をプレビューし、ブレークポイントの表示が今見ている Tailwind ブレークポイントを教える。クラス名を当てずっぽうで書くか、教えてもらうかの違いだ。

計算された領域とガイドラインが要素の実際の margin と padding を示すので、整列の問題が当て推量でなくなる。内蔵のスクリーンショットツールで画面の一部を切り取り、素早く受け渡せる。クラス一覧でも、編集を反映した要素全体でもコピーできる。小さな便利さだが、1 日の作業を通せば効いてくる。