## 概要
[[Tailwind CSS]]のv4がリリースされた。評判も良さそうなので試してみることにした。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://static.zenn.studio/images/logo-transparent.png" />
<span class="link-card-v2-site-name">Zenn</span>
</div>
<div class="link-card-v2-title">
Tailwind CSS V4まとめ！
</div>
<img class="link-card-v2-image" src="https://res.cloudinary.com/zenn/image/upload/s--6riAaNqK--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:Tailwind%2520CSS%2520V4%25E3%2581%25BE%25E3%2581%25A8%25E3%2582%2581%25EF%25BC%2581%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:Miz_dev%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzNkMjViZGYyMGYuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png" />
<a href="https://zenn.dev/miz_dev/articles/tailwind-css-v4"></a>
</div>
## 主な変更点
公式より。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://tailwindcss.com/favicon.ico" />
<span class="link-card-v2-site-name">tailwindcss.com</span>
</div>
<div class="link-card-v2-title">
Tailwind CSS v4.0
</div>
<div class="link-card-v2-content">
We just released Tailwind CSS v4.0 — an all-new version of the framework optimized for performance and flexibili ...
</div>
<img class="link-card-v2-image" src="https://tailwindcss.com/_next/static/media/card.22502194.jpg" />
<a href="https://tailwindcss.com/blog/tailwindcss-v4"></a>
</div>
気になった点をいくつか列挙。
- [高速化](https://tailwindcss.com/blog/tailwindcss-v4#new-high-performance-engine)
- フルビルド3.78倍
- インクリメンタルビルド8.8倍
- CSSファイル追加なしのインクリメンタルビルド182倍
- [Viteに対応](https://tailwindcss.com/blog/tailwindcss-v4#first-party-vite-plugin)
- [[PostCSS]]が不要に
- [設定ファイルが不要](https://tailwindcss.com/blog/tailwindcss-v4#simplified-installation)
- `tailwind.config.js` はなくても動く
- 設定ファイルを追加したい場合も[[CSS]]ファイルで対応可能
- [デザイントークン設定をCSS変数として利用可能](https://tailwindcss.com/blog/tailwindcss-v4#css-theme-variables)
- [[Tailwind CSS]]で定義された[[デザイントークン]]の定義を[[カスタムプロパティ (CSS)|カスタムプロパティ]]として利用できる
- [utility valuesやvariantsを定義不要で動的に設定可能](https://tailwindcss.com/blog/tailwindcss-v4#dynamic-utility-values-and-variants)
- `size-17` のように今までは認識できなかったものも認識される
- `size-17.5` のように0.5刻みで認識する
- `size-17.4` のようにそれより細かい単位では無効化された
- `bg-red-150` とかは無理
- [3D変換のutilitiesを追加](https://tailwindcss.com/blog/tailwindcss-v4#new-3d-transform-utilities)
- スライド作成とかで使えそう
- [`not-*` variant対応](https://tailwindcss.com/blog/tailwindcss-v4#not-variant)
- `not:hover:opacity-75` のような指定が可能に
## 環境
| 対象 | バージョン |
| ---------------- | ----------- |
| [[Ubuntu]] | 24.04.1 LTS |
| [[Bun]] | 1.2.2 |
| [[Tailwind CSS]] | 4.0.3 |
| [[Vue]] | 3.5.13 |
| [[Vite]] | 6.0.11 |
## インストール
v3からの移行ではなくv4を最初からインストールしてみる。
```console
bun create vite tailwind-sandbox --template vue-ts
cd tailwind-sandbox
bun add tailwindcss @tailwindcss/vite
```
## 設定
`vite.config.ts`
```ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "@tailwindcss/vite";
export default defineConfig({
plugins: [vue(), tailwindcss()],
});
```
## エントリポイント作成
`src/App.vue`
```html
<template>
<div class="flex flex-col justify-center items-center w-screen h-screen">
<span class="text-red-500 text-5xl">Title</span>
</div>
</template>
```
`src/style.css`
```css
@import "tailwindcss";
```
## ビルド
```console
bun dev
```
表示されればOK。
## トラブルシューティング
### [[Neovim]]で[[Tailwind CSS]]の補完が正しく表示されない
v4で設定ファイルが消えたため、[[nvim-lspconfig]]の設定でそれらを`root_dir`の判定に利用しないようにする。
```diff
lspconfig.tailwindcss.setup({
capabilities = capabilities,
- root_dir = util.root_pattern(
- "tailwind.config.js",
- "tailwind.config.cjs",
- "tailwind.config.mjs",
- "tailwind.config.ts"
- ),
})
```
何か副作用があるかもしれないが、記録していなかったので様子見。
> [Autocompletion Not Working with Vue.js and TailwindCSS v4 · Issue #1153 · tailwindlabs/tailwindcss-intellisense](https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1153)
### v4で対応された補完が表示されない
たとえば `size-15` とか。[[Tailwind CSS]]の[[LSP]]を更新してみる。
```console
npm:@tailwindcss/language-server latest 0.0.24 0.14.2 ~/.config/mise/config.toml
```
リリースノートを見ると `v0.12` あたりで[[Tailwind CSS]]のv4対応ガンガンされている形跡はある... が `size-15` は補完には出なそう。そこは定義されている値ではないから、むしろ出してはいけないのかもと思ったので、バージョンアップで一旦満足。`not-hover:` はちゃんと出てるから対応はされている。