大まかな反論

何度も何度も同じ議論
このポストは、使用に対する議論のいくつかを非難しますtailwindcss . 私は、過去にかなりしばしば彼らについて議論しました.たぶん、あなたも持っている?今後この記事を参照する予定です.これで私はあなたの楽な生活🤪
あなたが「反対のTarwindキャンプ」にいるならば、私はあなたの展望から有効な反論に興味があります.この記事の最後に、私は現在、私は現在何らかの形で有効であると考えている詐欺を指摘します.
注意:この投稿は、一般的にユーティリティの最初のCSSフレームワークについても書かれています.

反論
これらは、私が何度も何度も何度も何度も癒される声明です.このセクションの後に1つずつ、彼らに行きます.彼らは私の側に来る感情が😅

Tailwind violates the seperation of concerns between style and markup.

Tailwind is like inline styles and they are considered bad practice.

Tailwind is huge and reduces performance. You have to setup PurgeCSS PostCSS plugin to make it smaller.

There is a lot I have to learn upfront.

HTML looks like a mess and is bloated.

議論を解く
今すぐ楽しい部分に.どのようにこれらの議論に反論することができますか?

懸念の分離に違反する

Tailwind violates the seperation of concerns between style and markup.

言及されているコンサートはマークアップ(HTML)とスタイリング(CSS)です.これを指す人々は、しばしば言及するのが好きですCSS Zen Garden , ウェブサイトのルックアンドフィールは、CSSの変更だけで完全に変更できます.そうです、それは本当です.どのように多くの場合は、ルックアンドフィール全体のサイトのHTMLに触れることなく😉)?
あなたは何かのように考えるBEM (Block Element Modifier) あなたは“関心をseperated”ですか?BEMを使ったカードは次のようになります.

<div class="card card--dark">
    <img class="card__image">
    <h3 class="card__heading">Heading</h3>
    <div class="card__content">
        <p class="card__text">Lorem Ipsum...</p>
    </div>
</div>

私は、あなたが懸念が現在seperatedされると私に話したくないことを望みます.マークアップはカードとして表示されることを知っている.何か似たように見えるが、それは現実的なカードではありませんか?たぶんあなたは拡張を開始している.card どういうわけか、より広い、より一般的な名前を見つける.
どのような利点を完全にマークアップからスタイリングを分離しようとすることによって得るのですか?私の視点からも、それを一緒に保つために尾風の強さです!ちょうどあなた(または他の誰か)は、数ヶ月でカードを削除したり、別のスタイリングを作成する想像してください.CSSの削除も覚えていますか?削除できますか.もう一つのシナリオ:あなたは大きい(反応する)成分を持って、それをより小さな部分にカットしたいです.CSSのどちらが新しく作成されたコンポーネントに取り込まれることができますか?Strg + F おそらくあなたの友人になります.
スタイリングとマークアップを維持すると保守性が向上する.
マークアップからスタイルを分離しない別の利点:あなたは物事の名前を思い付く必要はありません.何か他のものとして表示されるカードを変更したいですか?あなたはおそらく名前を変更します.それはあなたにマイナーなもののように見えるかもしれませんが、私にとって、それは実際に心配するより少ないものです.
おそらく、以下の引用を読んだり聞いたりしたことがあります.

There are only two hard things in Computer Science: cache invalidation and naming things.

Read this あなたがそれについて聞いたことがないならば.
タイトルの深さの記事ですCSS Utility Classes and "Separation of Concerns" から.あなたがまだ確信していない場合それを読んでください.それは少し偏っているかもしれない、Beacuse🤪

Tailwindはインラインスタイルを書くようなものです

Tailwind is like inline styles and they are considered bad practice.

ごめんなさい、しかし、あなたは尾風の点を得ませんでした.おそらく、あなたはそれをすべて使用していないでしょう.(どうやって自分自身を試していないことに対して議論することができますか?)
そうですね、CSSプロパティとテール風クラスの間には1 : 1のマッピングがたくさんありますdisplay: flex そして、クラスflex . しかし、まず第一に-サイドノートであること-これはすべての場合、例えば、本当でありません.space-y-1 (私のお気に入りの一つです)

/* CSS for Tailwinds .space-y-1 */
--tw-space-y-reverse: 0;
margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));

より重要な方法:TailwindクラスのCSSプロパティの翻訳についてではありません.それはあなたが簡単にクラスの限られたセットを提供することにより、デザインシステムを使用することができますthrough the theming , これは、より簡単に一貫したスタイリングを作成するのに役立ちます.style="color: #6366F1;" and class="text-indigo-500" この場合、同じ結果を提供しますが、インラインスタイルを使用することにより、次の場所でわずかにオフの色を使用できますclass="text-indogo-600" . はい、あなたはCSS変数自身でこれのような何かを成し遂げることができました、しかし、Trewindはすでにあなたから箱の中にそれを提供します.

Trewindはパフォーマンスに悪いですpurgecssを設定しなければなりません

Tailwind is huge and reduces performance. You have to setup PurgeCSS PostCSS plugin to make it smaller.

あなたは少なくとも何とか正しい.使用することなく巨大ですPostCSS s PurgeCSS 未使用クラスを削除するためのプラグインabout 3.5MB uncompressed ). しかし、セットアップをする必要はありませんPurgeCSS V 1以降、ステップ、パイプライン、または使用するものをビルドします.4これは組み込まれています.ちょうど提供するpurge オプションtailwind.config.js そして、あなたは行くのが良いです.
最後の結果はおそらくあなた自身のCSSと比較してさらに小さくなるでしょう.チャンスは、あなた自身のCSSを書くとき、少なくともいくつかの未使用のCSSを出荷することです.それに加えて、定義済みのクラスを再利用するのではなく、別の場所でたくさんのCSSを持っています.
⚠️ パージに関する有効なポイントは、あなたがパージ方法を知っている必要があるという事実です.書きなさいpurgable HTML . あなたのようなクラスを使用することはできませんtext-$(color)-500 , だってPurgeCSS 文字列としてHTMLを解析するだけで動作します.それはあなたのコードを実行しないか、何らかの方法でそれを解釈しません.

学ぶべきこと

There is a lot I have to learn upfront.

先行学習曲線がある.しかし、それはあなたが考えるかもしれないより平坦です.クラスは非常に自然で一貫して命名されます.あなたはサブセットを知っている必要がありますし、チャンスは、既存の知識からクラスを派生させることができます.これには例外があります.クラスを見上げなければなりませんでしたline-height しばしば.leading-loose ).
bootstrapのようなCSSフレームワークのクラスを覚えているのは難しいです、そして、奇妙に、私はそれに対する議論としてそれを決して聞きませんでした🤷🏼‍♂️

HTMLは混乱です

HTML looks like a mess and is bloated.

さて、完全にこの声明を解約する議論はありません.これは私のプロジェクトの一つからコピーされます.

<article className="overflow-hidden rounded-lg shadow-md cursor-pointer duration-300 ease-in-out hover:scale-102">
    <section className="h-full p-3 rounded-lg shadow-lg bg-gray-50">
        <h3 className="mt-1 text-xl font-semibold truncate">Title</h3>
        <footer className="flex items-center mt-2 space-x-2">
            <!-- ... -->
        </footer>
    </section>
</article>

HTMLは間違いなくもっと乱雑だ😕
しかし、反対側に他のファイルを参照してください/スタイリングを調整するに切り替える必要はありません.そして、どのように多くの取引の構文で強調表示されますか?あなたはまだ別の色のためにHTML要素の上に概要を持つことができるでしょう.最後に、これはあなたが慣れる何かです.

有効な短所
あなたがおそらく今までには私がどうにか、狂っていると気がつきましたが、私は一般的に全く懐疑的で分析的な人です.どんなトレードオフもないことはめったにない.それは常にトレードオフについてです.
私が言及していない反論を知らせてください.
私も自分自身を持っているChakra UI (私は絶対的に愛しています-それは非常に好みのAPIのような)、あなたはゼロから物事を書く必要があります.ボタンのような一般的なビルディングブロック、日付ピッカー、モダールと入力は右(特にA 11 Yを考慮)を取得するのは難しいです.それで、Tarwindは最初に速度に上がる負担を持ちます.でも.まず、以前に書いたものを再利用することができます.第二に、これはどこですTailwind UI and Headless UI 遊びに出る.彼らは簡単に調整可能なビルディングブロックを提供します.

結論
私は風が好き❤️ それが非常に人気が得ている理由があります.あなたはすでにしていない場合は、それを試してみる必要があります.そして、あなたがまだしばらくの間懸念を持っているならば、あなたはそれに反論する立場にいます.(再び:少なくとも試してみることなく物事に反論しないでください).
ハッピーあなたのフィードバックを聞いてください.あなたは尾風を使用していますか?ない?なぜ?