多くのCSSフレームワークはやりすぎだ

Utility-first

多くのCSSフレームワークはボタン、カード、アラートなど、開発の初期段階ですばやくデザインするのに役立つ、あらゆる種類の事前に設計されたコンポーネントが付属しています。 しかし、カスタムデザインでサイトを目立たせるときは、多くの痛みを引き起こします。

Tailwindは違います。

Tailwindは、事前に設計されたコンポーネントの代わりに、HTMLを離れることなく完全にカスタム設計を構築できる低レベルのユーティリティクラスを提供します。

Woman paying for a purchase
Marketing
新たな顧客を見つける

新規事業を立ち上げるのは大変な作業です。 最初の顧客を見つけるために使用できる5つのアイデアを次に示します。

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">新たな顧客を見つける</a>
    <p class="mt-2 text-gray-600">新規事業を立ち上げるのは大変な作業です。 最初の顧客を見つけるために使用できる5つのアイデアを次に示します。</p>
  </div>
</div>

フレームワークとの戦い、不要なスタイルのオーバーライド、および特異性戦争との戦いにうんざりしている場合は、Tailwindが最適です。

Tailwindのユーティリティファーストワークフローについてはこちら


レスポンシブ対応

すべてのTailwindユーティリティにはレスポンシブバリアントも付属しているため、カスタムCSSを使用せずにレスポンシブインターフェイスを非常に簡単に構築できます。

Tailwindは、直感的な{screen}:プレフィックスを使用して、元のクラス名を認識可能でそのまま維持しながら、マークアップ内のレスポンシブクラスに簡単に気付くことができます。

<div class="justify-start sm:justify-center md:justify-end lg:justify-between xl:justify-around"></div>
1
2
3

Tailwindのレスポンシブデザインについてはこちら


コンポーネントフレンドリー

ユーティリティクラスだけで多くのことを実行できますが、プロジェクトが大きくなるにつれて、一般的なパターンをより高いレベルの抽象化に体系化すると便利な場合があります。

Tailwindは、繰り返されるユーティリティパターンからコンポーネントクラスを抽出するためのツールを提供し、コンポーネントの複数のインスタンスを1か所から簡単に更新できるようにします。

<!-- Using utilities: -->
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
  Button
</button>

<!-- Extracting component classes: -->
<button class="btn btn-blue">
  Button
</button>

<style>
  .btn {
    @apply font-bold py-2 px-4 rounded;
  }
  .btn-blue {
    @apply bg-blue-500 text-white;
  }
  .btn-blue:hover {
    @apply bg-blue-600;
  }
</style>

コンポーネントの抽出についてはこちら


カスタマイズデザイン

カスタマイズ可能であることが理にかなっている場合は、Tailwindを使用してカスタマイズできます。これには、色、境界線のサイズ、フォントの太さ、間隔ユーティリティ、ブレークポイント、影などが含まれます。

TailwindはPostCSSで記述され、JavaScriptで構成されています。つまり、実際のプログラミング言語の全機能をすぐに利用できます。

TailwindはCSSフレームワーク以上のものであり、設計システムを作成するためのエンジンです。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      tablet: '768px',
      desktop: '1024px',
    },
    colors: {
      primary: {
        100: '#ebf8ff',
        300: '#90cdf4',
        500: '#4299e1',
        700: '#2b6cb0',
        900: '#2a4365',
      },
      secondary: {
        100: '#fffff0',
        300: '#faf089',
        500: '#ecc94b',
        700: '#b7791f',
        900: '#744210',
      },
    },
    extend: {
      boxShadow: {
        huge: '0 30px 60px -15px rgba(0, 0, 0, .25)'
      }
    }
  }
}

Tailwindのカスタマイズについてはこちら

Tailwind UI is now in early access!