# 開発日記-2025-10-02 / Tailwind CSS v4への移行が大変だ

## TailWind CSS v4は便利だぞ

Tailwind CSS v4の新機能紹介記事。とりあえずこの記事を読んで変化を把握する。

::link-card[https://zenn.dev/jun0723/articles/f27b0046072704]

## メモ

- Reactのコンポーネント化の粒度や境界を、外部ライブラリのアップデートのしやすさを最優先に考えてもいいかもしれない
- Tailwindcss を v3 から v4 にするときにチェックしないといけないファイルや変更が発生するファイルが多すぎるのはつらい

## Color Converter

hsl → oklch、hex → rgbなどCSSの色の指定方法を相互変換できる

::link-card[https://atmos.style/color-converter]

## TailwindCSS v4で独自のクラスを定義する

```css
@theme {
  --font-roboto: 'Roboto', sans-serif;
}
```

```jsx
return <div className="font-roboto">Roboto</div>;
```

## GitHub Copilot

::link-card[https://zenn.dev/dely_jp/articles/def62abc417732]

::link-card[https://zenn.dev/prog_hallelujah/articles/b57ddf2c6763ce]

## ESLintのignoresは一番上に書かないといけない

```js
const eslintConfig = [
  {
    ignores: ['**/node_modules/**', '**/.next/**', '**/out/**', '**/build/**', '**/next-env.d.ts'],
    ...compat.extends('next/core-web-vitals', 'next/typescript'),
    // ...
  },
];
```

その他の設定例:

::link-card[https://zenn.dev/yu_ta_9/articles/7001d66779ff3a]

## HeroUIを個別に使う

TailwindCSS v4編。

```bash
pnpm add -E @heroui/theme
```

```ts:hero.ts
import { heroui } from '@heroui/theme'

export default heroui()
```

```css:globals.css
@import 'tailwindcss';

@plugin './hero.ts';
@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';

/* ... */
```