Tailwind CSSの初めての試み

"このものがあれば、CSS のプリプロセッサを導入する必要はないかもしれません。結局、CSS を書かないかもしれません。" - 私自身の言葉

Atomic CSS（アトミック CSS）#

Tailwind CSS を知る前に、アトミック CSS という概念を知る必要があります。アトミック CSS の概念は非常にシンプルで、すべての CSS クラスには一意の CSS ルールがあるというものです。

この方法で書くことにはいくつかの利点があります。

スタイルの競合が発生しないため、各クラスは一意であり、重複するクラス名はありません。
HTML 要素を移動する際にもスタイルが失われることはありません。
新しい機能を削除する際にも、スタイルが同時に削除されることが保証されます。

/* アトミックCSS */
.bw-2x {
  border-width: 2px;
}
.bss {
  border-style: solid;
}
.sans {
  font-style: sans-serif;
}
.p-1x {
  padding: 10px;
}

この書き方を使用する前に、いくつかの一般的なクラス名を定義する必要があります。例えば、上記の.bw-2x、.bss、.sans、.p-1xのようなクラス名です。それから開発を行うことができます。もしスタイルセットが他の人によって書かれたものである場合、そのスタイルセットを学習し、クラス名の規則を学ぶ必要があります。また、必要なスタイルがそのスタイルセットに含まれていない場合は、自分で書く必要があります。

Tailwind CSS#

~~神は言った：スタイルがあるべきだ、そして Tailwind CSS が生まれた~~
神は言った：光があるべきだ、そして光が生まれた。

Tailwind CSSは、いくつかの共通の命名規則を提供します。設定ファイルを使用して、ウェブサイトに専用のユーティリティ CSS セットを生成することができます。これは完全なデザインシステムであり、80％のビジネスシナリオをカバーするために即座に使用できる機能を提供する必要があります。また、残りの 20％のビジネスシナリオをサポートするための拡張メカニズムも必要です。

カスタム設定#

Tailwind CSS は、tailwind.config.jsで設定できるいくつかのオプションを提供しています。プロジェクトの UI デザインに明確な仕様（フォントサイズ、テーマカラー、ボタンサイズなど）がある場合、設定ファイルを使用して仕様に合致する CSS クラス名セットを生成することができます。

// tailwind.config.js 公式の設定例
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '##1fb6ff',
      'purple': '##7e5bef',
      'pink': '##ff49db',
      'orange': '##ff7849',
      'green': '##13ce66',
      'yellow': '##ffc82c',
      'gray-dark': '##273444',
      'gray': '##8492a6',
      'gray-light': '##d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

任意の値をサポート#

Tailwind CSS は、クラス名に対応するスタイルを提供しています。w-1/2を使用して幅を 50％に設定したり、w-1/3を使用して幅を 33.3333％に設定したりすることができますが、フレームワークが提供していないスタイルもあります。

Tailwind CSS は、任意の値を使用するクラス名規則を提供しています。たとえば、幅を 50px に設定する場合は、w-[50px]のクラス名を追加することで実現できます。この方法は、他の CSS プロパティの任意の値にも同様に適用できます。

レスポンシブデザイン#

Tailwind の各機能クラスは、異なるブレークポイントに条件付きで適用することができます（Bootstrap のようなものです）。これにより、HTML を離れることなく複雑なレスポンシブインターフェースを簡単に構築することができます。デフォルトでは、Tailwind は以下のブレークポイントを生成します：

sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }

@apply の抽出 / 再利用#

レスポンシブ対応が必要なため、1 つのクラス名は複数のブレークポイントに対応する必要があります。そのため、1 つのタグには数十のクラス名が存在することが避けられず、コードの読みやすさに影響を与え、後続のメンテナンスや拡張も困難になります。Tailwind CSS は、既存のクラス名を自分自身のカスタム CSS にインラインで適用するための @apply ディレクティブを提供しています。

.my-class {
  @apply h-48 w-full text-lg font-bold text-gray-900;
}

ファイルサイズは大きくなりますか？#

はい！すべての CSS プロパティを完全にカプセル化する必要があるため、CSS ファイルは非常に大きくなります。そのため、Tailwind CSS はビルドプロセスでPurgeCSSを使用して、使用されていないクラス名を見つけて一緒にパッケージ化されないようにします。そのため、ビルドプロセスではファイルサイズが大きくなる心配はありません。

欠点について#

Tailwind CSS はクラスベースのアプローチなので、使用する際にはクラス名に一定の理解が必要です。そうでないと、不要なスタイルが適用される可能性があります。
タグ内に多くのクラス名が含まれるため、見た目が悪くなり、読みやすさが損なわれ、後続のメンテナンスや変更が少し不便になることがあります。
UI ガイドラインとの組み合わせが必要であり、そうでない場合は複数人での開発が難しくなります。

実際の使用例#

HTML/CSS の実装

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img
      class="chat-notification-logo"
      src="/img/logo.svg"
      alt="ChitChat Logo"
    />
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: ##fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: ##1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: ##718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Tailwind CSS の実装

はるかにシンプルになりました😋

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
  </div>
  <div class="ml-6 pt-1">
    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
    <p class="text-base text-gray-600 leading-normal">
      You have a new message!
    </p>
  </div>
</div>

最後に#

個人的には、アトミック CSS は注目に値するトレンドだと思います。現在、Twitter、~~Facebook~~ Meta などの大手企業でも使用されています。

チームがデザインガイドラインに基づいて設計する場合、Tailwind CSS を使用すると非常に便利です。また、レイアウトを作成する際にも非常に便利で、意味のない命名をする必要がありません。😆

これは私個人の使用感ですので、興味があればぜひ実際に使用してみてください。✍️

ここで、antfu 氏が開発した Unocss もおすすめです。これは高性能で非常に柔軟なインスタントアトミック CSS エンジンです。

最後に、皆さんが CSS を完全に理解できることを願っています。💡