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の機能を積極的に導入しました。




```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での変化__
```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での変化__

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

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

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

__css使う時の変化__
```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の速度を上げることができます。

```js
/*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が必要な場合、このように作成すればいいです。
```css
@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"; ```これだけで解決ができます。

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

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

```CSS
/*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可能です。

__使う方__
```js
/*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)",
      },
    },
  },
};



```
```css
/*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の変数をすぐに活用できます。


```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 */
}
```

```css
/*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);
}
```

__使う方__
```js
.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からは使うことができるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981722/429f3042-fa3d-aa4c-673a-5dc40f607e39.png)

```html
<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を使うことができるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981722/558f8a81-7b3e-9c0b-c108-c0c1834c7f8d.png)

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



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

__Tailwind 3.x使う方__
```bash
npm install @tailwindcss/container-queries
```

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

export default {
  plugins: [containerQueries],
};
```

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

```


__Tailwind 4.0使う方__

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

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

```html
<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変化をするための機能が追加されました。


__使う方__
```html
<div class="perspective-distant">
  <article class="rotate-x-51 rotate-z-43 transform-3d ...">
    <!-- ... -->
  </article>
</div>
```
__[Link]__
https://play.tailwindcss.com/IPsFOcIasM

https://tailwindcss.com/blog/tailwindcss-v4#new-3d-transform-utilities



## Expanded gradient APIs

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

__Linear gradient angles__

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

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

```html
/*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/つかってグラジエントの補間を制御する機能が追加されました。

__使う方__

```html
<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>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981722/62a9b580-788e-5cde-262e-77bb9ddf9d3d.png)

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

__使う方__

```html
<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>
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3981722/d585fd1d-b006-d09f-b95e-133537b06435.png)

__[Link]__

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


## @starting-style support

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

https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style

__使う方__
```html
<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を５０％にします。
このように条件を付けることができるようになりました。

__使う方__
```html
<div class="not-hover:opacity-100">
  <p>hover me</p>
</div>
```

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

https://play.tailwindcss.com/1374ts9S9O


__[Link]__

https://tailwindcss.com/blog/tailwindcss-v4#not-variant



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