Tailwind CSS v3のカラーパレット自動生成ツールを公開しました

成果物

• GitHubリポジトリ
• npm

ツール開発のきっかけ

最近、個人開発でTailwind CSSを利用しているのですが、tailwind.config.jsに定義した色がどのようなものなのか、VSCode上で確認できないことに不便を感じていました。

↑カラーコードだけではどんな色なのかが分からない

また、仮にVSCode上で色のプレビューができても、行の高さの範囲内でしか色を確認できない(見づらい)という問題もありました。

そこで、tailwind.config.jsからHTMLを生成し、定義した色をブラウザ上で一覧で確認できるようにしよう、と思い立ったのが当ツール開発のきっかけになります。

使い方

※当ツールはTailwind CSSのv3系のみに対応しています。v4ではtailwind.config.jsを使わなくなったので、当ツールは利用できません。

詳しくはリポジトリ内のREADMEに書いてあるので、簡単に紹介だけします。

1. 当ツールはnpmにpublish済みなので、以下のコマンドでインストールできます。

   npm install -D tailwind-v3-palette

2. 以下のコマンドで実行できます。

   npx tailwind-v3-palette

   または

   npx t3p

3. 実行すると、リポジトリ内に以下のようなカラーパレットHTMLファイルが生成されます！
   カテゴリーの前の行にコメントを記載することで、カラーパレットの見出しを設定できるのが工夫ポイントです。

さいごに

ソースコードはGitHubリポジトリにて公開しています。

使ってみて良かったという方は、リポジトリにStarを押していただけると大変励みになります！