🚛

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

公開日
約3時間前
2025-10-02
更新履歴

TailWind CSS v4は便利だぞ

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

メモ

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

Color Converter

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

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

@theme {
  --font-roboto: 'Roboto', sans-serif;
}
return <div className="font-roboto">Roboto</div>;

GitHub Copilot

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

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

その他の設定例:

HeroUIを個別に使う

TailwindCSS v4編。

pnpm add -E @heroui/theme
hero.ts
import { heroui } from '@heroui/theme'

export default heroui()
globals.css
@import 'tailwindcss';

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

/* ... */