Tailwind CSSの仕様を見たらエグイと思ったこと

海外のページなんですがまずはググりました

Sass vs Tailwind CSS vs Styled-components

そもそも私はHTMLの中に書くようなインライン系のことをする言語が大嫌いです

だからPHPとかJavaScriptのインラインスクリプトみたいなのが本当に嫌いでして。

ちなみにStyled-JSX機能もどちらかというと死ぬほど嫌いですし。

使いたい場所だけ充てられるCSS Modulesは現在のSassスコープの仕様上使う必要があります。

はい、なんでこんなにインラインが嫌いなのか考えました。

可読性<利便性 = インラインの書き方

かと思いきや利便性は本当に最初だけです。放物線を画くとするなら最初のスタートは急上昇しますがそれ以降伸びません。

と言う感じで品質に拘るなら最低でもインラインすべては廃止するべきだと考えます。

で、今回何が言いたいかっていうと、このフレームワーク割と意外とやべーんすよ。

なぜならTailwind CSSはクラスネームという文化を捨てている。

色々書き比べた結果Tailwind CSSにしたという話

それでも私がTailwind CSSではなく、CSS Modulesを推す理由

こんな感じで煽り文が多いQiitaでもバチバチ戦っています。

とはいえ私は最新の技術が好きなのでTailwindを褒めちぎります。

CSSの着地する理想の姿

基本的に現実の理想はTailwindで書いてコンパイルしたらScssが生成される。

というのはclassNameが存在しないので無理かと思いきや、最初に宣言する、もしくは充てるようにすればできます。

で、FigmaなどのプロトタイプツールでTailwind CSSのプラグインがあって自動生成されたTailwindをSassにコンパイルして作ればいいんじゃないでしょうか。

なのでプロトタイプ+TailwindからSassにし最終的にCSSへとコンパイルしデザインの入口をFigma一つにすればいいです。

一つ言っておきたいことはコンパイル言語に双方性はないということです。

CSSはSassにコンパイルできず、JSはTSにコンパイルできません。

ということはFigmaはCSSを生成するプラグインとして開発するのではなくTailwind CSSを生成するようにするべきです。

これにならってTailwind CSSはSassへコンパイルできるようにすれば前述のとおりFigmaからSassをスムーズに生成できるでしょう。

仕様上実質FigmaとSassの中間を取り持つ重役になりそうです。

ということで、

現状ではReact Native専用みたいな小規模開発やプロトタイプなどで真価を発揮するのかと思います。

Tailwindはデザイナーがプロトタイプ作るときに気持ちよくノーコーディングできるフレームワークってことでいいでしょう。