追い風？私はパスします

最近、プロジェクトで Tailwindcss を使用しました。控えめに言っても、それは目を見張るような経験でした。

「Tailwindcss とは何ですか?」と疑問に思っている方もいるかもしれません。

Tailwind CSS は、これまでで最も急速に成長しているCSSライブラリとして際立っています。これはすぐにフロントエンド開発者にとって不可欠なツールになりました。フロントエンドの多くの開発者が大規模プロジェクトでこれを利用していますが、遭遇する問題はほとんどありません。 Web サイトおよび Web アプリの開発とデザインに対する機能強化は、間違いなく注目に値します。

だから問題は何ですか？タイトルが「 Tailwindcss」なのはなぜですか?いいえ、ありがとう」？

このタイトルは、Tailwind CSS が優れているにもかかわらず、プロジェクトにとって最適な選択ではない場合があることを示唆しています。なぜそうなるのでしょうか？答えはあります。ただし、説明を掘り下げる前に、このテクノロジーを検討するための基礎を確立しましょう。

CSS は一体どうなっているのでしょうか?

Tailwindcssとその開発の複雑さに入る前に、いくつかの前提条件を満たす必要があります。

CSSとは何ですか?

CSSはCascading Style Sheetsの略です。私の意見では、CSS の最も適切な定義はtechterms.comにあります。

「CSS は、HTML Web ページ内のコンテンツの書式設定に使用されるスタイル シート言語です。 CSS スタイル シートでは、コンテンツ自体とは別に、テキスト、表、その他の要素の外観と書式設定を定義できます。スタイルは、Web ページの HTML ファイル内、または複数の Web ページによって参照される別のドキュメント内に存在する場合があります。」

それほど多くの言葉で言えば、CSS はスタイリング言語です。 Web ページや Web アプリの見栄えを良くするには、 HTML要素で CSS を使用します。

テイルウィンドックスとは何ですか？

Tailwindcss チーム自身の言葉によると、Tailwindcss は「 flex 、 pt-4 、 text-center 、 rotate-90などのクラスが詰め込まれたユーティリティ優先の CSS フレームワークで、マークアップ内で直接任意のデザインを構築できるように構成できます」。

これは本質的に、tailwind CSS がオリジナルの CSS プロシージャと操作を取り入れて、それらの実行と実装をより簡単にすることを意味します。

CSS と Tailwind CSS の基本についてはすでに説明しました。ここで、Tailwind CSS が実際にどのように動作するか、対応する CSS と合わせてさらに詳しく調べてみましょう。この探求は、最終的に、Tailwind CSS を含む私のプロジェクト中に到達した結論につながります。

私の結論は、Tailwind CSS は大規模で複雑なフロントエンド プロジェクトに最適であるということです。ただし、ほとんどの場合、デフォルトの選択は依然として「標準」CSS です。言い換えれば、CSS を最も純粋な形式で使用することは、Tailwind CSS であろうと他のものであろうと、追加のライブラリと比較して、ほとんどの個人およびシナリオにとって一般的に有利です。

CSS と Tailwindcss の違い

Tailwindcs はどのようなものですか?バニラの同等の CSS を作成してから、Tailwindcss の同等の CSS を作成して比較してみましょう。

上記のテキストで何が起こっているのかを分析してみましょう。これはHTML 5の抜粋であり、ボタンを構築しています。

ボタンを構築するには、「 divs 」を使用してボタンを設定します。これは、Web サイトや Web アプリを変更するための入力を行うための小さなコンテナーです。各 div に独自の「 class 」を与え、後で別の CSS ファイルでその特定の要素を参照できるようにします。ただし、div に独自の「 id 」を与えることもできます。 「インライン」CSS 変更を行うことができます。つまり、CSS を HTML ファイルに直接挿入できますが、ほとんどの場合、整理のためにそれを避ける傾向があります。

CSS ファイルでは、ボタンを編集するコードはどのようになりますか?

上記のコードでは、HTML の抜粋内のボタン クラスと対話しています。 CSS ファイルで HTML クラスを認識させる方法は、クラス名自体の先頭にドットを付けることです。その下に順番に「 align-items 」でボタンをdivの中央に揃えていきます。 align-item の下には、「 background-color 」がどこまで伸びるか、どこまで伸びないかを定義する「 background Clip 」があります。 「ボーダー」はボタンの側面の厚さであり、ボーダー半径はエッジの曲がり具合です。ここまで述べたことはすべて、ボタン スタイルの開発に貢献します。ご覧のとおり、元の CSS スタイルは十分に単純であるように見えます。 Tailwindcss は同じケースをどのように処理しますか?

ちょっと待って、何？ CSS のようなコードを HTML ファイルに挿入しただけでしょうか?はい、やりました。ここで見ているものは、Tailwindcss の以前のコード例と同等です。これは実際、Tailwindcss の最もユニークな属性の 1 つです。 Tailwindcss を使用する場合は、別の CSS コードを別のファイルに配置しません。 Tailwindcss コードはすべて HTML ファイルに直接入力されます。前に述べたように、開発者は伝統的にインラインCSS コーディングを避けてきました。 Tailwindcss では、インライン コーディングは実際にはオプションではなくなり、ほぼ必須になっています。 Tailwindcss は、クラス識別を通じて完全に実装されています。

さて、上記のコードは何をするのでしょうか?わずかに異なりますが、元の CSS コードが行うこととまったく同じことを行います。

通常の CSS と Tailwindcss の対応物をもう一度見てみましょう。

上の画像では、 HTML5ドキュメント内で、クラス「 card-img 」の下にチョコレートの画像をインポートしています。対応する CSS がどのようになるかを見てみましょう。

上記の CSS コードは最後のものと似ています。あまり詳細な外挿は必要ありません。チョコレートカードの外観を定義しています。次に、さらに興味深い Tailwindcss の亜種を見てみましょう。

上記のコードは Tailwindcss と同等です。これははるかにシンプルで洗練されていますが、すべてが何を意味するのか、ステートメントをどのように配置するのかを理解するには、より多くの労力が必要です。では、それは従来の CSS に比べて利点があるのでしょうか?

Tailwindcss の性質上、非常に厄介です。すべてのコード (HTML と CSS の両方) は 1 つのファイルにまとめられ、長くなり、一見混雑しているように見えます。これにより開発が困難になります。

Tailwindcss の主な欠点は何ですか?

• 学習曲線が急で、慣れるまでに時間がかかります。
• カスタムクラスコンポーネントを作成する必要があります。 (長いプロジェクトではこれが膨大になる可能性があります)。
• HTMLとスタイルが混在しているため混乱する

その主な利点は何ですか?

• 高度にカスタマイズ可能

• 開発の迅速化

• 何を追加または編集しても、一貫した文言とパターン。

  
  

Tailwindcss の例を見てきましたが、主な利点と欠点がわかりました。しかし、どれくらい人気があるのでしょうか？

これは、新旧両方の開発者の間で採用され、普及してきました。

tailwindweekly.com の Vivian Guillen 氏は、 2022 年 11 月 19 日の時点で、Tailwindcss は週間ダウンロード数 450 万件を達成したと述べました。私がこれを書いている現在、 npmjs.comにアクセスして Tailwindcss を検索すると、ダウンロード数は 3 億 3,600 万件あります。 5 年前のリリース以来、1 日あたり平均 184,110 ダウンロードされています。信じられないほどのダウンロード数。

追い風に乗ってリラックス

以前、この記事の冒頭で「 Tailwindcss がプロジェクトにとって最適なソリューションではない場合があるかもしれません」と書きました。なぜこれを書いたのか?そしてそれはタイトルとどのように関係していますか？ 「追い風？私はパスします "。

Tailwindcss は、ほぼすべてのフロントエンド開発者の間で世界的に人気があり、従来の CSS よりも実装が簡単に見え、同種の他のテクノロジーよりもカスタマイズ性が高くなります。へー、私の使用法はこの記事自体にも影響を与えました。では、なぜ私はまだそれを疑っているのでしょうか？もちろん使ったからです。

Tailwindcss は、誰もが主張しているのと同じくらい、あるいはそれ以上に優れています。同様に、人々が主張するように、それはあらゆる面で悪いものです。 Tailwindcss の性質上、短期から中期のプロジェクトで作業するのは複雑で、学習曲線が開発を完全に妨げ、カスタム コンポーネントの作成へのこだわりなどがあります。これらすべてが、Tailwindcss を短期的には耐えられないものにしています。短期間だけ！

これは、Tailwind CSS は、開発者や企業が取り組む大規模で複雑なプロジェクトのために予約する必要があることを意味します。短いプロジェクトの場合は、従来の CSS に従うことをお勧めします。これにより、CSS スキルの低下を防ぎ、Tailwind CSS のようなショートカット フレームワークに過度に依存することを防ぎます。なぜ私を信じなければならないのですか？私はマイナー プロジェクトで Tailwind CSS の採用に挑戦しましたが、その結果、なぜそれが実質的で永続的なベンチャーに適しているのかがはっきりとわかりました。他の CSS フレームワークについても詳しく調べることに興奮しており、それに関する記事を書くこともあるかもしれません。

私を購読していただければ、すぐにお会いできることをお知らせします ;)