Tailwind CSS は Web 開発の世界を席巻しました ?️ が、その性質についての誤解は依然として残っています。最近のデザイン システム計画のディスカッション中、同僚が何気なく Tailwind CSS を Bootstrap や Materialsize と比較したとき、私はお茶を落としそうになりました ☕ (コーヒーは飲みません、ごめんなさい)。この衝撃的な事実は、私の猫が自分を犬だと思っていることを発見したようなものでした。 ??

それで、ポップコーンを買ってきて?私は記録を正し、Tailwind CSS の正体を明らかにします!

小さなイントロ

この記事では、Tailwind CSS とは何なのかを深く掘り下げ、スタイリングに対するその独自のアプローチと、Tailwind CSS が従来の CSS フレームワークと区別される理由を探ります。最後までに、Tailwind CSS を Bootstrap や他のコンポーネントベースのフレームワークと比較することが、リンゴとオレンジを比較するようなものである理由が理解できるでしょう ??

Tailwind CSS ではないもの ❌

Tailwind の本当の性質を探る前に、いくつかの誤解を払拭しましょう:

• コンポーネント ライブラリではありません: Bootstrap や Materialize とは異なり、Tailwind CSS はすぐに使える事前構築済みコンポーネントを提供しません ?
• デザインの意見はありません: プロジェクトに特定のビジュアル スタイルを強制しません ?
• 単なる別の CSS フレームワークではありません: 技術的には CSS フレームワークですが、実用性第一のアプローチにより、従来のフレームワークとは一線を画しています ?

よくある誤解をいくつか紹介します:

• ? 「Tailwind CSS はインライン スタイルと同じです」 : いいえ、そうではありません。インライン スタイルとは異なり、Tailwind では、疑似クラス、メディア クエリ、アニメーションなどの高度な機能を使用できます。ユーティリティ優先のアプローチを提供するため、インライン スタイルと比較して CSS クラスの数が少なくなります
• ? 「Tailwind を使用するのに CSS を知る必要はありません」 : これは false です。 Tailwind CSS4 を効果的に使用するには、CSS をしっかりと理解することが重要です。 CSS の基礎を理解すると、スタイル設定の多くの側面が簡素化されますが、ユーティリティ クラスがどのように機能するか、必要に応じてカスタマイズする方法を理解するのに役立ちます
• ? 「Tailwind CSS はカスタマイズできません」 : これは真実とは程遠い。実際、高度に拡張可能でカスタマイズ可能
になるように設計されています。

いくつかの誤解を解消したので、Tailwind CSS が本当にユニークである理由と、開発者が Web スタイルにアプローチする方法に革命をもたらしている理由を探ってみましょう。

ユーティリティファーストの CSS フレームワーク

Tailwind CSS の核心は、ユーティリティファースト CSS フレームワークです。これは、HTML で直接カスタム デザインを構築するために使用できる 低レベル ユーティリティ クラス のセットを提供することを意味します。要素ごとにカスタム CSS を記述する代わりに、特定のスタイル プロパティを処理する事前定義されたクラスを適用します。スイスアーミーナイフを持っているようなものですか？ CSS に!

たとえば、次のように書く代わりに:

.button {
  padding: 0.5rem 1rem;
  background-color: blue;
  color: white;
  border-radius: 0.25rem;
}

HTML で Tailwind クラスを使用します:

Click me

変装したデザインシステム

Tailwind は事前に構築されたコンポーネントを提供しませんが、包括的な設計システムを提供します。 色、間隔、タイポグラフィなどのデフォルト値の慎重に作成されたセットが付属しています。これらのデフォルトはカスタマイズ可能で、Tailwind をプロジェクト固有の設計ニーズに合わせて調整できます。

このカスタム構成を見てみましょう:

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          light: '#4da6ff',
          DEFAULT: '#0066cc',
          dark: '#004080',
        },
        secondary: {
          light: '#ffb366',
          DEFAULT: '#ff8000',
          dark: '#cc6600',
        },
      },
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem',
      },
      fontFamily: {
        sans: ['Roboto', 'Arial', 'sans-serif'],
        serif: ['Merriweather', 'Georgia', 'serif'],
      },
      fontSize: {
        'xs': '.75rem',
        'sm': '.875rem',
        'base': '1rem',
        'lg': '1.125rem',
        'xl': '1.25rem',
        '2xl': '1.5rem',
        '3xl': '1.875rem',
        '4xl': '2.25rem',
        '5xl': '3rem',
      },
      borderRadius: {
        'sm': '0.125rem',
        DEFAULT: '0.25rem',
        'md': '0.375rem',
        'lg': '0.5rem',
        'full': '9999px',
      },
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active'],
      textColor: ['visited'],
    },
  },
}

Tailwind CSS が他と比べて優れている理由

柔軟性とカスタマイズ

独自のコンポーネントのセットを提供する Bootstrap や Materialsize とは異なり、Tailwind は独自のデザインを作成するための構成要素を提供します。この柔軟性により、クリエイティブな自由がさらに広がり、多くの Web サイトが陥りがちな 「ブートストラップ ルック」 を避けることができます。

パフォーマンス上の利点

ユーティリティ第一のアプローチにより、特に組み込みのパージ機能と組み合わせると、CSS ファイルのサイズが小さくなる可能性があります。この機能は実稼働環境で使用されていないスタイルを削除し、よりスリムでパフォーマンスの高いスタイルシートを実現します。あなたのウェブサイトはステロイドを使用しているように感じられます。 ?

開発者エクスペリエンスを向上させるツール

次のことによって開発者のエクスペリエンスが大幅に向上します:

• コンテキストの切り替えを減らす: HTML を離れることなく要素のスタイルを設定できます。複数のファイルをやりくりする必要はもうありません。 ?‍♂️
• 一貫性の促進: 事前定義されたクラスにより、プロジェクト全体で一貫した間隔、色、その他のデザイン要素が促進されます。あなたのデザインは、よく調整されたオーケストラのように調和します?
• 開発のスピードアップ: ユーティリティ クラスをすぐに使用できるため、プロトタイプを迅速に作成し、設計を反復できます。自分にスーパーパワーがあるような気分になるでしょう!⚡ また、Tailwindcss Intellisense vscode 拡張機能を使用すると、そのクラスと追加されたカスタム クラスの オートコンプリートとリンティング を取得できます

それはラップですか？

Tailwind CSS は、単なる CSS フレームワークではありません。低レベルのユーティリティ クラスのセットを提供することにより、開発者は従来の CSS フレームワークの制約を受けることなく、独自で効率的で保守可能な設計を作成できるようになります。

したがって、次回誰かが Tailwind と Bootstrap を比較するとき、あなたはその比較が的外れである理由、そしてなぜ Tailwind があなたのプロジェクトに必要なゲームチェンジャーである可能性があるのか​​を説明できるようになります。コーディングを楽しんでください! ??‍?