HTMLを離れることなく、モダンなウェブサイトを迅速に構築。

ユーティリティファーストなCSSフレームワーク。次のようなクラスが満載： flex, pt-4, text-center and rotate-90 そして、マークアップ内で直接、あらゆるデザインを構築するために組み合わせることができます。

はじめに

<div class="flex flex-col items-center rounded-2xl">  <div>    <img class="size-48 shadow-xl" alt="" src="/img/cover.png" />  </div>  <div class="flex">    <span>Class Warfare</span>    <span>The Anti-Patterns</span>    <span class="flex">      <span>No. 4</span>      <span>·</span>      <span>2025</span>    </span>  </div></div>

Class WarfareThe Anti-PatternsNo. 4·2025

なぜTailwind CSSなのか？

現代のウェブのために構築。

Tailwindは断固としてモダンであり、最新最高のCSS機能を活用して、開発者の体験を可能な限り楽しいものにします。

レスポンシブデザイン

確かに、最先端とは言えませんが、文字通りどんなユーティリティの前にでも画面サイズを記述すれば、特定のブレークポイントで適用できます。

モバイル

一軒家ヒューロン湖畔のビーチハウス

一軒家

ヒューロン湖畔のビーチハウス2.66(128 レビュー)·ベイフィールド、オンタリオ州

この日当たりが良く広々とした部屋は、身軽に旅行し、一晩だけ快適で居心地の良い場所で休みたい方に最適です... もっと見る

フィルター

最近のウェブサイトで、背景のぼかしが少しもないものなんてあるでしょうか？デザイナーに「お願いだから、もうやめて」と言われるまで、フィルターを重ね続けましょう。

blur-sm

brightness-150

grayscale

contrast-150

saturate-200

sepia

ダークモード

網膜を焼くのが好きでないなら、ただ dark: ダークモードで適用するには、色の前に `dark:` を記述してください。

CSS変数

テーマのカスタマイズは、いくつかのCSS変数を作成するのと同じくらい簡単です。

@theme {
  --font-sans: "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --text-tiny: 0.625rem;
  --text-tiny--line-height: 1.5rem;
  --color-mint-100: oklch(0.97 0.15 145);
  --color-mint-200: oklch(0.92 0.18 145);
  --color-mint-300: oklch(0.85 0.22 145);
  --color-mint-400: oklch(0.78 0.25 145);
  --color-mint-500: oklch(0.7 0.28 145);
  --color-mint-600: oklch(0.63 0.3 145);
  --color-mint-700: oklch(0.56 0.32 145);
  --color-mint-800: oklch(0.48 0.35 145);
  --color-mint-900: oklch(0.4 0.37 145);
  --color-mint-950: oklch(0.3 0.4 145);
}

P3カラー

カラーパレットは現在、より鮮やかな広色域カラーを使用していますが、それが何を意味するのか理解する必要はありません。

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

950

900

800

700

600

500

400

300

200

100

CSSグリッドレイアウト

HTMLで直接グリッドユーティリティを使用すると、複雑なレイアウトについてずっと考えやすくなります。

プロパティを閲覧

ツリーハウス

大邸宅

湖畔のコテージ

デザイナーズホーム

トランジションとアニメーション

期待どおりに動作するトランジション — 要素にいくつかのユーティリティを適用すれば、準備完了です。

transition duration-750linear

transition duration-750ease-out

transition duration-750ease-in-out

transition duration-750ease-in

カスケードレイヤー

TailwindはCSSレイヤーを使用しているため、特異性の問題を心配する必要はありません。

@layer theme, base, components, utilities;
@layer theme {
  :root {
    /* Your theme variables */
  }
}
@layer base {
  /* Preflight styles */
}
@layer components {
  /* Your custom components */
}
@layer utilities {
  /* Your utility classes */
}

論理プロパティ

複数言語のテキスト方向のサポートは、もはや悪夢ではありません。

ltr

rtl

Will Wintonオペレーションディレクター

Kristin Yardlyマーケティングコーディネーター

Emanual Cuccittiniスタッフエンジニア

Kiara Smithエンジニアリング担当副社長

سارة أحمدمديرة مشاريع

علي محمدمطور برمجيات

خالد عمرمصمم واجهات المستخدم

コンテナクエリ

要素をコンテナとしてタグ付けすると、子要素がそのサイズの変更に適応できます。

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-2">
    <img
      src="/img/photo-1.jpg"
      class="aspect-square @sm:aspect-3/2 object-cover"
    />
    <img
      src="/img/photo-2.jpg"
      class="aspect-square @sm:aspect-3/2 object-cover"
    />
    <img
      src="/img/photo-3.jpg"
      class="aspect-square @sm:aspect-3/2 object-cover"
    />
    <img
      src="/img/photo-4.jpg"
      class="aspect-square @sm:aspect-3/2 object-cover"
    />
  </div>
</div>

グラデーション

複雑なグラデーション構文を覚える必要はありません — ほんの数個のユーティリティクラスで、絹のように滑らかなグラデーションを作成できます。

パワーと精度が融合

リアルタイムパフォーマンスの再定義

当社の次世代レンダリングエンジンは、比類のないスピードと効率性を実現し、クリエイターがこれまでにないほど限界を押し広げることを可能にします。

レンダリング時間パフォーマンス

6.4x

リアルタイムフレームレート

4.2x

マルチプラットフォームビルド時間

2.7x

3Dトランスフォーム

時には2次元だけでは十分ではありません。 3D空間で要素を拡大、回転、および平行移動して、奥行きを加えましょう。

仕組み

より速く、より小さく配信。

text-base text-gray-950

Tailwindは、本番環境向けにビルドする際に、未使用のCSSをすべて自動的に削除します。つまり、最終的なCSSバンドルは可能な限り小さくなります。実際、ほとんどのTailwindプロジェクトでは、クライアントに10kB未満のCSSしか配信しません。

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Tailwind CSS</title>    <link rel="stylesheet" href="/build.css" />  </head>  <body>    <button class=""></button>  </body></html>