Tailwind の使い方が間違っていたので、そうする必要はありません

約 3 年前、私は Web サイト開発用の素晴らしいライブラリである Tailwind CSS に出会いました。この記事を合理的に短くするために、紹介するのに言葉を無駄にするつもりはありません。すでに学ぶべき情報源がたくさんあります。その代わりに、私が Tailwind の初期の頃に犯し続けた間違いについての話をしたいと思います。私と同じ穴に落ちる必要はありません。

Tailwind は、CSS ルールをいわゆる ユーティリティ クラス にラップすることにより、カスケード スタイル シート の伝統的な概念を打ち破ります。 .css ファイルで CSS ルールを作成する代わりに、DOM 要素に直接クラス名を作成します。このアプローチは最初は不自然で奇妙に感じられますが、すぐに意味が分かり始めます。これを理解するのに約 1 日かかりましたが、今では、強制されない限り、プレーンな CSS を再び書きたくありません。 Tailwind は、私の一番のフレームワーク Nuxt にシームレスに統合されており、視覚的に魅力的でレスポンシブ対応の Web サイトを数分以内に作成できるシンプルさは、本当に素晴らしいです。

ただし、落とし穴があります。知っているオプションが増え、含めることを選択したスタイルが増えれば増えるほど、HTML は肥大化して混乱する可能性があります。私が初期の頃に感じた 2 つ目の問題は、同じことを繰り返すことでした。名誉ある DRY 原則の信奉者として、テンプレート内でまったく同じ一連のクラスが何度も表示されるのは目が痛くなりました。

これを最適化しようとしていました。

最初のアイデアは、Tailwind クラスのシーケンスを文字列変数として抽出することでした。 Vue.js (Nuxt は Vue 上に構築されます) では、おおよそ次のようになります。

<-- component before -->
<template>
 <div>
  <button>





<pre class="brush:php;toolbar:false"><-- component after -->
<template>
 <div>
  <button :class="tailwindBtn">
    Button 1
  </button>
  <button :class="tailwindBtn">
    Button 2
  </button>
  <button :class="tailwindBtn">
    Button 3
  </button>
 </div>
</template>

<script setup lang="ts">
const tailwindBtn = "m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold"
</script>

ついに、維持と変更が簡単になりました。明確さには議論の余地があります。特に、アプリの周囲に同じ要素があり、その定義をグローバルのような定数にホイストする必要がある場合は特にそうです。

私はさらに良い解決策を探していました。

そして、Tailwind の @apply ディレクティブを紹介されました。基本的に、それは概念全体の否定のようなものです。定義を具体的な要素に直接配置する代わりに、独自の スタイルシートの並べ替え を作成し、カスタム クラスと要素の調整をそれに入力することができます。単純な CSS ルールの代わりに、Tailwind ユーティリティ クラスからソリューションを作成するだけです。

奇妙ですが、重複した定義による私の精神的な問題は解決されるようです。

VueSchool の講師と Tailwind のドキュメントの両方から、それを使用しないようしてはならないと警告されましたが、当然のことながら聞きませんでした。

私はこのアプローチを使用していくつかの Web サイトを作成しました。うまくいきました。問題は解決しましたか?

2024 年後半まで早送りしてください。自分の Web サイトの 1 つについて、いくつかの新しいアイデアを思いつきました。コーディングを始めました。 1 年以上前に行った @apply shenanigans のことをすっかり忘れていました。そして突然、レイアウトをまとめることができなくなってしまったのです。

テンプレートでは明らかなスタイルが使用されていませんでしたが、

が適切な場所にありませんでした。何が起こっているのか？ブラウザで開発コンソールを開いて、レンダリングされた HTML を調べました。 CSS スタイルが適用されていました。

少しイライラした後、犯人が分かりました。

突然、次のことが起こりました:

<-- component before -->
<template>
 <div>
  <button>





<pre class="brush:php;toolbar:false"><-- component after -->
<template>
 <div>
  <button :class="tailwindBtn">
    Button 1
  </button>
  <button :class="tailwindBtn">
    Button 2
  </button>
  <button :class="tailwindBtn">
    Button 3
  </button>
 </div>
</template>

<script setup lang="ts">
const tailwindBtn = "m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold"
</script>

tailwind.css ファイル内のこれは、2023 年当時ほど素晴らしいアイデアとは思えませんでした。

いつか別のものが必要になるなんて誰にも分からないでしょう?

レッスン #1

要素セレクターでは @apply をグローバルに決して使用しないでください。

新しいプロジェクトを足場にするときは便利に見えるかもしれませんが、長期的にはそれがあなたを苦しめる可能性があります。私と同じように、あなたもそれを簡単に忘れてしまうだけではありません。また、物事の柔軟性も低下します。いつかあなたは賢くなって、それを取り除く準備ができて戻ってくるでしょう - しかし、グローバル スタイルを削除すると、そのスタイルに基づいて構築されたサイトの半分が予期せずバラバラになってしまいます。デザイン全体を再考する心の準備はできていますか?

個人的には、tailwind.css では @apply をまったく使用しないことをお勧めします (それを配置できたすべてのプロジェクトから @apply を盗用する時間と忍耐力があればの話ですが)。

それでも正当な理由なくそれを使用することに固執する場合 (Tailwinds のドキュメントにある 「サードパーティのライブラリのスタイルをオーバーライドするのが好き」)、少なくとも クラスの作成にはそれを使用してください。 .

.my-cool-css-class を持っていることは許されます。少なくとも、スタイルを設定したい要素にそれをアタッチする必要があるからです。同様に、誰もが（未来の自分を含む）そこにそれを見ることができ、必要に応じてその定義を見つけることができます。

はい、しかし

このルールを破ろうとする魅力的な候補はアンカー要素です。なぜなら、それぞれの に class 属性を付加するのは非常に面倒だからです。

考えられる代替案の 1 つは、アンカーの周囲 (または Nuxt の組み込み の周囲) をラップするカスタム リンク コンポーネントを作成することです。しかし、あなたはそれが気に入らないかもしれません、そして私はあなたを責めません。

実際、@apply ディレクティブの使用は依然としてトップランクのソリューションです。

おそらく、グローバル要素スタイルが意味のあるさらに多くの例を作成できるでしょう。 100% 確信がある場合は、それらを使用してください。しかし、それは常に十分な根拠に基づいた決定である必要があります。

レッスン #2

Tailwind クラス定義が長すぎる/重複している本当の理由は、コードの設計が不十分であることです。

Vue のような最新の JavaScript フレームワークを使用すると、小さな再利用可能なコンポーネントを作成し、それらを組み合わせて複雑なソリューションを構築する機能が得られます。ご利用ください。

上記のボタンの例は次のようになります:

<-- MyButton.vue -->

  



<p>このようにして、重複したコードは削除されます。</p><p>一方で、非常に長いクラスチェーンを見ると、貧弱な要素があまりにも多くの懸念を抱えていたのではないかといつも思います。最善のことは、一歩下がって、そこに至るまでの決定を見直すことです。</p>

<p>私の経験では、少数の Tailwind クラスだけで見栄えの良いデザインを作成できます。さらに追加したい場合は、通常、すべてが 1 つの要素に積み重なることはありません。これは、すべてを実行する 1 つの大きなコンポーネント (または必要に応じてクラス) を作成するのとほぼ同じです。ある時点で、行を追加するのをやめて、内容を分割し始める必要があります。</p>

<p>最悪のシナリオでは、視覚的に要求の高い CSS 要素を個別のコンポーネントにカプセル化して、必要な操作の量を最小限に抑えることができるはずです。しかし、正直に言うと、おそらく誰かがすでにそれを行っているので、あなたがしなければならないのは、プロジェクトで使用する適切な Tailwind コンポーネント ライブラリを見つけることだけです。</p>


          

            
        

以上がTailwind の使い方が間違っていたので、そうする必要はありませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css less html String if sort for while include catch break using class Attribute JS console dom this idea everything Other

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。