tailwind 4.0 updateについて

tailwind 4.0 アップデート

初め

2025年1月22日に正式アップデートしたtailwind4.0について見てみましょう

今回のアップデートは性能と柔軟性を最適化し、最新のWebの利点を活用し、カスタマイズに対して行われました。

新しい高性能エンジン

ビルドの速度が改善されました。

	v3.4	v4.0	改善
ビルド	378ms	100ms	3.78x
新しいCSSで増分的再構築	44ms	5ms	8.8x
新しいCSSなしで増分的再構築	35ms	192µs	182x

なお、tailwindの問題だったビルドの時間が改善されたので使用について効率が上昇したと言えます。

[Link]
https://tailwindcss.com/blog/tailwindcss-v4#new-high-performance-engine

モダンなウェブの設計

最新cssの機能を積極的に導入しました。

@layer theme, base, components, utilities;
@layer utilities {
  .mx-6 {
    margin-inline: calc(var(--spacing) * 6);
  }
  .bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  }
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

Native cascade layers:
スタイルルールがどのように相互作用するかをより細かく制御できる @layerが追加されました。
この機能により、異なるCSS管理が直感的になりました。

Registered custom properties:
カスタムプロパティを登録する機能が追加されました。
この機能により、グラデーションのアニメーションも登録可能です。
さらに大規模なページでも性能を向上することができます。

color-mix:
color-mix()を使用すると、CSS変数やcurrentColorを含む任意の色の不透明度を調整できるようになります
Logical properties:
RTLのサポートを単純化し、生成されたCSSのサイズを小さくします。

[Link]
https://tailwindcss.com/blog/tailwindcss-v4#designed-for-the-modern-web

tailwindの設置が簡単になりました。

npmで設置する方の変化

//tailwind 3.x
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

//tailwind 4.0
npm i tailwindcss @tailwindcss/postcss;

initをする必要がないです。

tailwind.config.jsでの変化

//tailwind 3.x
module.exports = {
  content: ["./src/**/*.{html,js,ts,tsx}"], 
  theme: {
    extend: {},
  },
  plugins: [],
};

//tailwind 4.0
export default {
  plugins: ["@tailwindcss/postcss"],
};

tailwindが自動的にcontentを探すので設定しなくても大丈夫です。

postcss.config.jsでの変化

//tailwind 3.x
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

// tailwind 4.0
export default {
  plugins: ["@tailwindcss/postcss"],
};

Lightning CSSがあるのでautoprefixerも要りません。

css使う時の変化

/*tailwind 3.x*/
@tailwind base;
@tailwind components;
@tailwind utilities;

/*tailwind 4.0*/
@import "tailwindcss";

CSSでも@import "tailwindcss";だけで十分です。

[Link]
https://tailwindcss.com/blog/tailwindcss-v4#simplified-installation

Vite Plugin

Vite Pluginのおかげで、Viteを使うときPostCSSなしで使うことができます。
なお、buildの速度を上げることができます。

/*tailwind 3.x*/
import { defineConfig } from "vite";
import postcss from "@tailwindcss/postcss";

export default defineConfig({
  css: {
    postcss,
  },
});

/*tailwind 4.0*/
import { defineConfig } from "vite";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
});

[Link]
https://tailwindcss.com/blog/tailwindcss-v4#first-party-vite-plugin

コンテンツを自動的に探知する。

.gitignoreとかimage, video, zipなども無視しますので、buildの設定が簡単になりました。

imageやvideoが必要な場合、このように作成すればいいです。

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";

[Link]
https://tailwindcss.com/blog/tailwindcss-v4#automatic-content-detection

内蔵されたimport support

3.xのtailwindでは postcssの設定必要だったんですが、
4.0のtailwindでは@import "./base.css"; これだけで解決ができます。

/*tailwind 3.x*/
export default {
  plugins: [
    "postcss-import", 
    "@tailwindcss/postcss",
  ],
};

/*tailwind 4.0*/
export default {
  plugins: [
    "@tailwindcss/postcss", 
  ],
};

/*tailwind 3.x*/
@import "./base.css";
@tailwind base;
@tailwind components;
@tailwind utilities;


/*tailwind 4.0*/
@import "./base.css"; 
@import "tailwindcss"; 

[Link]
https://tailwindcss.com/blog/tailwindcss-v4#built-in-import-support

CSS-first configuration

tailwindを使うときにtailwind.config.jsなしで使うことができるようになりました。
cssだけでcustom可能です。

使う方

/*tailwind 3.x*/
export default {
  theme: {
    extend: {
      fontFamily: {
        display: ["Satoshi", "sans-serif"],
      },
      screens: {
        "3xl": "1920px",
      },
      colors: {
        avocado: {
          100: "oklch(0.99 0 0)",
          200: "oklch(0.98 0.04 113.22)",
          300: "oklch(0.94 0.11 115.03)",
          400: "oklch(0.92 0.19 114.08)",
          500: "oklch(0.84 0.18 117.33)",
          600: "oklch(0.53 0.12 118.34)",
        },
      },
      transitionTimingFunction: {
        fluid: "cubic-bezier(0.3, 0, 0, 1)",
        snappy: "cubic-bezier(0.2, 0, 0, 1)",
      },
    },
  },
};

/*tailwind 4.0*/
@import "tailwindcss"; 

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}

[Link]
https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration

CSS theme variables

CSS-first configurationのコードを参考してください。
tailwind.jsで宣言ではなくcssで宣言が可能なので、cssの変数をすぐに活用できます。

/*tailwind 3.x*/
:root {
  --color-avocado-100: #dff0d8;
  --color-avocado-200: #c8e6c9;
  --color-avocado-300: #a5d6a7;
}

.button {
  background-color: var(--color-avocado-200); /* #c8e6c9 */
}

/*tailwind 4.0*/
@import "tailwindcss"; 

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
}

使う方

.button {
  background-color: var(--color-avocado-200); /* #c8e6c9 */
  color: white;
}

[Link]
https://tailwindcss.com/blog/tailwindcss-v4#css-theme-variables

Dynamic utility values and variants

tailwind 3.xではgird-cols-15とような使う方が出来なかったですが、tailwind4.0からは使うことができるようになりました。

<div class="grid grid-cols-15">
  <!-- ... -->
</div>

なお、色んなカスタマイズができるようになりました。

[Link]
https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants

Modernized P3 color palette

rgbを改善し、oklchを使うことができるようになりました。

[Link]
https://tailwindcss.com/blog/tailwindcss-v4#modernized-p3-color-palette

Container queries

@tailwindcss/container-queriesの技能使たとき可能だったんですが、pluginなしで使うことができます。

Tailwind 3.x使う方

npm install @tailwindcss/container-queries

// tailwind.config.js
import containerQueries from '@tailwindcss/container-queries';

export default {
  plugins: [containerQueries],
};

<div class="container @container">
  <div class="grid grid-cols-1 @sm:grid-cols-3 @lg:grid-cols-4">
    <!-- ... -->
  </div>
</div>

Tailwind 4.0使う方

同じなんですが、npmで設置しなくて使うことができます。

<div class="@container">
  <div class="grid grid-cols-3 @max-md:grid-cols-1">
    <!-- ... -->
  </div>
</div>

@tailwindcss/container-queriesにはなかった@max-*, @min-*も追加されました。

[Link]
https://tailwindcss.com/blog/tailwindcss-v4#container-queries

New 3D transform utilities

３D変化をするための機能が追加されました。

使う方

<div class="perspective-distant">
  <article class="rotate-x-51 rotate-z-43 transform-3d ...">
    <!-- ... -->
  </article>
</div>

[Link]
https://play.tailwindcss.com/IPsFOcIasM

Expanded gradient APIs

4.0 グラジエント技能が追加されました。

Linear gradient angles

linear gradientが45角度を作ることができます。

変更事項
bg-gradient-*からbg-linear-*に変更しました。

/*tailwind 3.x*/
<div class="rounded-lg bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-6">
  <button class="rounded-lg px-4 py-2 font-semibold text-white">Click</button>
</div>

/*tailwind 4.0*/
<div class="rounded-lg bg-linear-45 from-indigo-500 via-purple-500 to-pink-500 p-6">
  <button class="rounded-lg px-4 py-2 font-semibold text-white">Click</button>
</div>

Gradient interpolation modifiers

bg-linear-to-r/つかってグラジエントの補間を制御する機能が追加されました。

使う方

<div class="bg-linear-to-r/srgb from-indigo-500 to-teal-400 p-6 rounded-lg">
  <button class="text-white font-semibold py-2 px-4 rounded-lg">Click (sRGB)</button>
</div>

<div class="bg-linear-to-r/oklch from-indigo-500 to-teal-400 p-6 rounded-lg">
  <button class="text-white font-semibold py-2 px-4 rounded-lg">Click (OKLCH)</button>
</div>

Conic and radial gradients
円錐グラジエントができるようになりました。

使う方

<div class="size-24 rounded-full bg-conic/[in_hsl_longer_hue] from-red-600 to-red-600"></div>
<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

[Link]

@starting-style support

starting使うことでjavascriptなしでpropertyを変化させることができます。
Firefoxはまだ支援しないのでご注意ください。

使う方

<div>
  <button popovertarget="my-popover">Check for updates</button>
  <div popover id="my-popover" class="... transition-discrete starting:open:opacity-0">
    <p>Updateがあります!!!</p>
  </div>
</div>

[Link]
https://tailwindcss.com/blog/tailwindcss-v4#expanded-gradient-apis

not-* variant

notを使ってhoverしない時opacityを５０％にします。
このように条件を付けることができるようになりました。

使う方

<div class="not-hover:opacity-100">
  <p>hover me</p>
</div>

.not-hover\:opacity-100:not(*:hover) {
  opacity: 50%;
}

[Link]

まとめ

tailwindの問題がある程度解消され、簡略化されるにつれtailwindに対する使用を悩んでいたなら充分に使ってみても良いと思います。