tailwindcssクラスを見える化する「tailwind-config-viewer」

2021-04-25

概要

チームでtailwindcssを使用して開発している時、使用するクラスを調べては書いてを繰り返すことがあります。
また、configファイルに拡張クラスを定義するとより複雑になりがちで、把握するのに時間がかかります。
普段よりtailwindcssを使用し、慣れているメンバーだと理解が早いですが、そうでない場合は無駄な時間を過ごしてしまうこともあると思います。

今回紹介するパッケージである「tailwind-config-viewer」は、開発時に使用できるクラスをUIとして提供してくれます。
可視化されることで時間短縮、クラスのイメージが簡単に理解できるといった便利なツールです。

導入

https://github.com/rogden/tailwind-config-viewer

インストール

tailwind.config.jsのあるディレクトリで実行します。

npx
npx tailwind-config-viewer
ローカル
npm install -D tailwind-config-viewer

そしてpackage.jsonにエイリアスを記述します。
例は単体で記述してますが、他の処理も合わせて設定するといちいちコマンドを打たずに済むとおもいます。

package.json
"scripts": {
  "tw-config-viewer": "tw-config-viewer -o"
}

起動

処理を走らせてみます。

npm run tw-config-viewer

tw-viewer起動結果

このように、使用クラスが可視化され把握がしやすいです。

ファイルを出力する

前述した方法は開発時に自動で立ち上がる方法です。
ここでは、静的にファイルを出力し、他の環境で共有できるようにしていきます。

package.json
"scripts": {
  "tw-viewer-build": "tailwind-config-viewer export ./generate-tw-ui"
}

generate-tw-uiというディレクトリに静的ファイルを出力します。

実行すると、htmlやcssが入っているはずです。

オプション

-p, --port = viewer実行のポート。デフォルトは3000。
-o, --open = デフォルトのブラウザでviewerを開く。デフォルトはfalse。
-c, --config = tailwind.config.jsへのパスを指定する。デフォルトはtailwind.config.js。

結論

tailwindcssをカスタマイズしている場合や、チーム内の認識合わせのために必要なツールだと感じました。

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店