指定した Prefix を TailwindCSS の各クラス名の先頭に置き換えるツール。
基本的な TailwindCSS のクラス名に対応しております。
独自で指定した TailwindCSS クラス名には非対応となります。
Shopify のテーマ開発にて TailwindCSS を導入したは良いものの、既存の CSS を override しないように Prefix をつける必要性がありました。
ただ、開発工数を下げるために様々な TailwindCSS のコンポーネントを使用します。
その際、莫大な置換作業が発生しかえって時間が取られそうなため作成しました。
https://twc-prefix-parser.vercel.app/
① Prefix を決める
tw-
② Input Field に貼り付ける
<nav
class="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-400 flex flex-wrap items-center text-base justify-center"
>
<a class="mr-5 hover:text-gray-900">First Link</a>
<a class="mr-5 hover:text-gray-900">Second Link</a>
<a class="mr-5 hover:text-gray-900">Third Link</a>
<a class="mr-5 hover:text-gray-900">Fourth Link</a>
</nav>
③ 変換する
④Result に Prefix 付きで表示される
<nav
class="md:tw-mr-auto md:tw-ml-4 md:tw-py-1 md:tw-pl-4 md:tw-border-l md:tw-border-gray-400 tw-flex tw-flex-wrap tw-items-center tw-text-base tw-justify-center"
>
<a class="tw-mr-5 hover:tw-text-gray-900">First Link</a>
<a class="tw-mr-5 hover:tw-text-gray-900">Second Link</a>
<a class="tw-mr-5 hover:tw-text-gray-900">Third Link</a>
<a class="tw-mr-5 hover:tw-text-gray-900">Fourth Link</a>
</nav>
- TailwindCSS
- NextJS
- TS
- fortawesome