CSSをTailwind.css向けにリアルタイム変換するOSS・「CSS To Tailwind」

CSS To Tailwind

CSS To TailwindはCSSをTailwind.css向けにリアルタイム変換するOSSです。

CSSをTailwindに変換、というと語弊があるかもですが、要は書いたCSSに該当するTailwindのclassをリアルタイムで吐き出してくれる、というものになります。

例えば以下のCSSを書いた場合、

body {
    width: 100%;
    height: 50%;
    margin: 0 !important;
    background-color: transparent;
    transform: translate(10px, -20px) scale(.5);
}

以下をリアルタイムで提示してくれます。

w-full
h-1/2
!m-0
bg-transparent
transform
translate-x-[10px]
-translate-y-[20px]
scale-[.5]

勿論@mediaにも対応可能ですし、任意のプレフィックスを加える事も可能です。結構便利。ライセンスはMITです。

CSS To Tailwind