Tailwind CSS v4の新機能紹介記事。とりあえずこの記事を読んで変化を把握する。
hsl → oklch、hex → rgbなどCSSの色の指定方法を相互変換できる
@theme {
--font-roboto: 'Roboto', sans-serif;
}
return <div className="font-roboto">Roboto</div>;
const eslintConfig = [
{
ignores: ['**/node_modules/**', '**/.next/**', '**/out/**', '**/build/**', '**/next-env.d.ts'],
...compat.extends('next/core-web-vitals', 'next/typescript'),
// ...
},
];
その他の設定例:
TailwindCSS v4編。
pnpm add -E @heroui/theme
import { heroui } from '@heroui/theme'
export default heroui()
@import 'tailwindcss';
@plugin './hero.ts';
@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
/* ... */