ドキュメントブログShowcasePlus

Tailwind CSS v1.7.0

Adam Wathan

Tailwindの新しいリリースがまた登場しました！ 今回は、グラデーション、background-clipのサポート、@applyをバリアントユーティリティで実験的に使用するサポート、その他多数の新機能が含まれています。早速見ていきましょう！

新機能

グラデーション

このリリースの目玉は、Tailwindに背景グラデーションの組み込みサポートが追加されたことです！

グラデーションは高度に composable な API で設計されており、デフォルトで8方向のいずれかで最大3つのカラーストップを指定できます

<div class="bg-gradient-to-r from-orange-400 via-red-500 to-pink-500">
  <!-- ... -->
</div>

これは、新しい backgroundImage コアプラグイン (好きな背景画像に使用できます！) と新しい gradientColorStops コアプラグインによって可能になりました。

これらのプラグインのデフォルト設定は次のようになります

tailwind.config.js
module.exports = {
  theme: {
    backgroundImage: {
      "gradient-to-t": "linear-gradient(to top, var(--gradient-color-stops))",
      "gradient-to-tr": "linear-gradient(to top right, var(--gradient-color-stops))",
      "gradient-to-r": "linear-gradient(to right, var(--gradient-color-stops))",
      "gradient-to-br": "linear-gradient(to bottom right, var(--gradient-color-stops))",
      "gradient-to-b": "linear-gradient(to bottom, var(--gradient-color-stops))",
      "gradient-to-bl": "linear-gradient(to bottom left, var(--gradient-color-stops))",
      "gradient-to-l": "linear-gradient(to left, var(--gradient-color-stops))",
      "gradient-to-tl": "linear-gradient(to top left, var(--gradient-color-stops))",
    },
    gradientColorStops: (theme) => theme("colors"),
  },
  variants: {
    backgroundImage: ["responsive"],
    gradientColorStops: ["responsive", "hover", "focus"],
  },
};

詳細はこちらをご覧ください: オリジナルのプルリクエスト。

新しい background-clip ユーティリティ

要素内での背景のレンダリング方法を制御するために使用できる、新しい backgroundClip コアプラグインも追加しました。

4つの新しいユーティリティが含まれています

クラスCSS
bg-clip-borderbackground-clip: border-box
bg-clip-paddingbackground-clip: padding-box
bg-clip-contentbackground-clip: content-box
bg-clip-textbackground-clip: text

新しいグラデーション機能と組み合わせることで、このようなクールなグラデーションテキストを作成できます

<h1 class="text-6xl font-bold">
  <span class="bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">
    Greetings from Tailwind v1.7.
  </span>
</h1>

backgroundClip プラグインでは、レスポンシブバリアントのみがデフォルトで有効になっています

tailwind.config.js
module.exports = {
  variants: {
    backgroundClip: ["responsive"],
  },
};

新しい gap ユーティリティエイリアス

どういうわけか、`column-gap` と `row-gap` ユーティリティにそれぞれ `col-gap-{n}` と `row-gap-{n}` という名前を付けましたが、これはひどいものではありませんが、Tailwind の他のものの命名方法と一貫性がありません。

いつも間違えてしまうことに気づきました — `row-gap` は行のギャップですか、それとも行間のギャップですか？

Tailwind v1.7 では、まったく同じことを行う新しい `gap-x-{n}` および `gap-y-{n}` ユーティリティが導入されましたが、名前はマシになりました。 flexbox には「列」がないため、flexbox のギャップも展開し始めている今、CSS の実際の名前よりもはるかに理にかなっています。

これらのユーティリティは v2.0 で古いものを置き換えますが、今のところ両方とも共存しています。

今すぐ新しい名前に移行し、この機能フラグを使用して古い名前を無効にすることをお勧めします

tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  // ...
};

このフラグを有効にするまで、Tailwind はビルドで非推奨のクラスを含めていることを警告としてコンソールに出力します。

新しい contents display ユーティリティ

最近の `display: contents` CSS 機能用の新しい `contents` クラスを追加しました。

<div class="flex">
  <div><!-- ... --></div>
  <!-- This container will act as a phantom container, and its children will be treated as part of the parent flex container -->
  <div class="contents">
    <div><!-- ... --></div>
    <div><!-- ... --></div>
  </div>
  <div><!-- ... --></div>
</div>

詳細については、Rachel Andrew によるこちらの素晴らしい記事をご覧ください。

フォントサイズごとのデフォルトの文字間隔

tailwind.config.js テーマで、フォントサイズごとにデフォルトの文字間隔値を構成できるようになりました。タプル構文を使用します

tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      2xl: ['24px', {
        letterSpacing: '-0.01em',
      }],
      // Or with a default line-height as well
      3xl: ['32px', {
        letterSpacing: '-0.02em',
        lineHeight: '40px',
      }],
    }
  }
}

この新しい構文は、最近導入された、よりシンプルな `[{fontSize}, {lineHeight}]` 構文に加えてサポートされています。

divide ボーダースタイル

divide ユーティリティでボーダースタイルを設定するためのユーティリティを追加しました

<div class="divide-y divide-dashed">
  <div><!-- ... --></div>
  <div><!-- ... --></div>
  <div><!-- ... --></div>
  <div><!-- ... --></div>
</div>

これらのユーティリティには、デフォルトでレスポンシブバリアントが含まれています

tailwind.config.js
module.exports = {
  variants: {
    divideStyle: ["responsive"],
  },
};

プラグインから設定オブジェクト全体にアクセス

プラグイン API に渡される config 関数は、引数なしで呼び出されると、設定オプション全体を返すようになりました

tailwind.plugin(function ({ config, addUtilities, /* ... */ })) {
  // Returns entire config object
  config()
})

色をクロージャとして定義

カラー値を生成するために使用できるパラメータのバッグを受け取るコールバックとして色を定義できるようになりました。

これは、カスタムカラーを backgroundOpacity、textOpacity などのユーティリティで動作させようとする場合に特に役立ちます

tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: ({ opacityVariable }) => `rgba(var(--color-primary), var(${variable}, 1))`,
    },
  },
};

現在、渡されるのは opacityVariable プロパティのみです。これには、どのプラグインが色を使用しているかに応じて、現在の不透明度変数 (--background-opacity、--text-opacity など) の名前が含まれています。

非推奨

Tailwind v1.7 では、アップグレードをできるだけ容易にするように設計された、新しい機能フラグと非推奨システムが導入されました。

機能の非推奨または新しい (安定した) 破壊的変更を導入するたびに、それらは tailwind.config.js ファイルの future プロパティの下の Tailwind v1.x で利用可能になります。

非推奨または破壊的変更が利用可能な場合は常に、新しい変更を採用し、設定ファイルでフラグを有効にするまで、Tailwind はすべてのビルドでコンソールに警告を表示します

risk - There are upcoming breaking changes: removeDeprecatedGapUtilities
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwind.dokyumento.jp/docs/upcoming-changes

tailwind.config.js ファイルでそのフラグを true に設定することにより、破壊的変更をオプトインできます

tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
};

オプトインしないことを希望するが、警告を非表示にしたい場合は、フラグを明示的に false に設定します

tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: false,
  },
};

Tailwind v2.0 へのアップグレードがより困難になるため、**これをお勧めしません**。

非推奨の gap ユーティリティ

前述のように、Tailwind v1.7.0 では、現在の col-gap-{n} および row-gap-{n} ユーティリティを置き換える新しい gap-x-{n} および gap-y-{n}` ユーティリティが導入されました。

デフォルトでは両方のクラスが存在しますが、古いユーティリティは Tailwind v2.0 で削除されます。

新しいクラス名に移行するには、古い名前の既存の使用箇所を新しい名前に置き換えるだけです

<div class="col-gap-4 row-gap-2 ...">
<div class="gap-x-4 gap-y-2 ...">
</div>

今すぐ新しい名前をオプトインするには、tailwind.config.js ファイルで removeDeprecatedGapUtilities フラグを有効にします

tailwind.config.js
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
};

試験的な機能

Tailwind v1.7.0 では、間もなく Tailwind に登場する予定だが、まだ安定していない新しい機能をオプトインできる新しい実験的機能システムが導入されました。

**実験的な機能は破壊的変更を導入する可能性があり、semver に従わず、いつでも変更される可能性がある** ことに注意することが重要です。

大胆なことをするのが好きなら、このようにしてすべてを有効にできます

tailwind.config.js
module.exports = {
  experimental: "all",
};

それはさておき、私たちが取り組んでおり、ついに皆さんが試せるようになった楽しいもののいくつかを以下に示します...

バリアントやその他の複雑なクラスで @apply を使用する

これは非常に大きなものです — レスポンシブバリアント、疑似クラスバリアント、およびその他の複雑なクラスでついに @apply を使用できます！

.btn {
  @apply bg-indigo hover:bg-indigo-700 sm:text-lg;
}

これについて理解すべき詳細はたくさんあります。それがどのように機能するかについて学ぶために、プルリクエストを読むことをお勧めします。

これは @apply の以前の動作方法に破壊的変更を導入するため、スイッチを切り替える前にすべての詳細を必ずお読みください。

この機能を有効にするには、applyComplexClasses フラグを使用します

tailwind.config.js
module.exports = {
  experimental: {
    applyComplexClasses: true,
  },
};

新しいカラーパレット

uniformColorPalette フラグを使用して今日から試すことができる、新しい Tailwind 2.0 カラーパレットのティーザーを追加しました

tailwind.config.js
module.exports = {
  experimental: {
    uniformColorPalette: true,
  },
};

新しいパレットの背後にある考え方は、すべてのシェードのすべての色が同様の知覚される明るさを持つということです。 したがって、indigo-600 を blue-600 と交換して、同じ色のコントラストを期待できます。

これらの色は反復処理を続けるにつれて変化し続けると予想されるため、ご自身の責任で使用してください。

拡張されたスペーシングスケール

0.5、1.5、2.5、3.5 などの新しいマイクロ値と、72、80、96 などの新しい大きな値を含む、はるかに大きなスペーシングスケールを追加しました *そして*、スペーシングスケール全体にパーセントベースの分数値を追加しました (1/2、5/6、7/12 など)

extendedSpacingScale フラグを使用して、拡張されたスペーシングスケールを有効にできます

tailwind.config.js
module.exports = {
  experimental: {
    extendedSpacingScale: true,
  },
};

これはかなり安定しており、これを変更することは驚きです。

デフォルトでフォントサイズごとのデフォルトの行の高さ

defaultLineHeights フラグを使用して有効にできる、すべての組み込みフォントサイズに推奨されるデフォルトの行の高さを追加しました

tailwind.config.js
module.exports = {
  experimental: {
    defaultLineHeights: true,
  },
};

これは破壊的変更であり、以前はすべてのフォントサイズのデフォルトの行の高さが 1.5 であったため、デザインに影響を与えます。

拡張されたフォントサイズスケール

最新の巨大なヒーローテキストのトレンドに対応するために、3つの新しいフォントサイズ (7xl、8xl、9xl) を追加しました。 それらにはデフォルトの行の高さも含まれています。

extendedFontSizeScale フラグの下でそれらを有効にできます

tailwind.config.js
module.exports = {
  experimental: {
    extendedFontSizeScale: true,
  },
};

この投稿について話したいですか？ GitHub で議論する →

最新情報を直接受信箱に届けます。
ニュースレターにサインアップしてください。

Copyright © 2025 Tailwind Labs Inc.·商標ポリシー