🎨

Tailwind CSS v3.3の新機能

に公開
CSS
Tailwind CSS
frontend
styling
tech

Tailwind CSS v3.3.0の新機能と改善点を紹介します。マイナーアップデートながら、実用的なユーティリティクラスが多数追加されました。

公式ブログ: https://tailwindcss.com/blog/tailwindcss-v3-3
プレイグラウンド: https://play.tailwindcss.com

暗色の拡張（950シェード追加）

全カラーパレットに950シェードが追加されました。ダークモードUIで、より深い暗色表現が可能になります。

<div class="bg-slate-950 text-slate-50">
  Very dark background with light text
</div>

公式ドキュメント: https://tailwindcss.com/docs/customizing-colors
リリースノート: https://tailwindcss.com/blog/tailwindcss-v3-3#extended-color-palette

ESMとTypeScriptサポート

設定ファイルでESM形式とTypeScriptが使用できるようになりました。

以前: CommonJS形式のみ対応
v3.3以降: ESM、TypeScript対応

より柔軟な設定が可能になり、TypeScript環境での型安全性も向上しました。

詳細: https://tailwindcss.com/blog/tailwindcss-v3-3#esm-and-typescript-support

論理プロパティ（LTR/RTL対応）

左右の余白調整で論理プロパティが使用できるようになりました。

従来: margin-left、margin-rightなどの物理プロパティ
v3.3以降: 論理プロパティで自動調整

<div class="ms-2"></div>
<!-- margin-inline-start: 0.5rem; -->

msはmargin-inline-startの略で、LTR（左→右）とRTL（右→左）の書字方向に自動対応します。

公式ドキュメント: https://tailwindcss.com/docs/margin#logical-properties
リリースノート: https://tailwindcss.com/blog/tailwindcss-v3-3#new-logical-property-utilities

グラデーションのカラーストップ位置指定

グラデーションの各カラーストップ位置を細かく調整できるようになりました。

<div class="bg-gradient-to-r from-sky-400 from-10% via-emerald-500 via-30% to-indigo-500"></div>

from-10%、via-30%のように、任意の位置でカラーストップを指定できます。

公式ドキュメント: https://tailwindcss.com/docs/gradient-color-stops#specifying-stop-positions
リリースノート: https://tailwindcss.com/blog/tailwindcss-v3-3#simplified-syntax-for-color-stops

line-clamp機能の公式組み込み

テキストの行数制限機能が公式機能として組み込まれました。

以前: プラグインが必要（@tailwindcss/line-clamp）
v3.3以降: 標準機能として利用可能

<div class="line-clamp-3">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut
  aliquet aliquam, nunc orci aliquet nisl, nec aliquet nunc nisl eu ante...
</div>

.line-clamp-{n}で指定した行数を超えたテキストを自動的に省略表示（...）します。

公式ドキュメント: https://tailwindcss.com/docs/line-clamp
リリースノート: https://tailwindcss.com/blog/tailwindcss-v3-3#built-in-support-for-line-clamp

line-heightとfont-sizeの簡潔な記法

フォントサイズと行の高さをスラッシュで簡潔に記述できるようになりました。

従来:

<div class="text-lg leading-7"></div>

v3.3以降:

<div class="text-lg/7"></div>
<!-- 任意の値も指定可能 -->
<div class="text-lg/[15px]"></div>

公式ドキュメント: https://tailwindcss.com/docs/font-size#setting-the-line-height
リリースノート: https://tailwindcss.com/blog/tailwindcss-v3-3#simplified-syntax-for-line-height

CSS変数の簡潔な記法

CSS変数使用時にvar()の記述を省略できるようになりました。

<!-- 従来 -->
<div class="bg-[var(--my-color)]"></div>

<!-- v3.3以降 -->
<div class="bg-[--my-color]"></div>

リリースノート: https://tailwindcss.com/blog/tailwindcss-v3-3#simplified-syntax-for-arbitrary-values

font-variation-settingsのサポート

設定ファイルで可変フォント（Variable Fonts）の詳細設定が可能になりました。

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      sans: [
        'Inter var, sans-serif',
        {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32',
        },
      ],
    },
  },
}

公式ドキュメント: https://tailwindcss.com/docs/font-family#customizing-font-feature-settings
リリースノート: https://tailwindcss.com/blog/tailwindcss-v3-3#configurable-font-feature-and-variation-settings

list-style-imageのサポート

リストマーカーに画像を使用できるようになりました。

<ul class="list-image-[url(/img/checkmark.png)]">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

公式ドキュメント: https://tailwindcss.com/docs/list-style-image
リリースノート: https://tailwindcss.com/blog/tailwindcss-v3-3#new-list-style-image-utilities

hyphensのサポート

英語テキストの自動ハイフネーション（単語の途中で改行する際のハイフン挿入）をブラウザに指示できるようになりました。

<p class="hyphens-auto">
  Supercalifragilisticexpialidocious is a very long word that might need hyphenation
</p>

公式ドキュメント: https://tailwindcss.com/docs/hyphens
リリースノート: https://tailwindcss.com/blog/tailwindcss-v3-3#new-hyphens-utilities

caption-sideのサポート

テーブルキャプションの位置（上部/下部）を制御できるようになりました。

<table class="caption-bottom">
  <caption>Table caption at bottom</caption>
  <!-- table content -->
</table>

公式ドキュメント: https://tailwindcss.com/docs/caption-side
リリースノート: https://tailwindcss.com/blog/tailwindcss-v3-3#new-caption-side-utilities

まとめ

Tailwind CSS v3.3は実用的な機能が追加されたマイナーアップデートです。

特に注目の機能:

  • line-clampの公式組み込み
  • text-lg/7形式のline-height指定
  • 論理プロパティによるLTR/RTL対応

これらの機能により、より効率的でメンテナンス性の高いスタイリングが可能になりました。

Discussion