TailWind CSS v4は便利だぞ
Tailwind CSS v4の新機能紹介記事。とりあえずこの記事を読んで変化を把握する。
TailWind CSS v4は便利だぞ
zenn.dev
メモ
- Reactのコンポーネント化の粒度や境界を、外部ライブラリのアップデートのしやすさを最優先に考えてもいいかもしれない
- Tailwindcss を v3 から v4 にするときにチェックしないといけないファイルや変更が発生するファイルが多すぎるのはつらい
Color Converter
hsl → oklch、hex → rgbなどCSSの色の指定方法を相互変換できる
HEX to HSL Color Converter – Atmos
Convert HEX to HSL colors instantly. Free online tool supporting HEX, RGB, HSL, LCH, and OKLCH formats.
atmos.style
TailwindCSS v4で独自のクラスを定義する
@theme {
--font-roboto: 'Roboto', sans-serif;
}return <div className="font-roboto">Roboto</div>;GitHub Copilot
GitHub Copilot関連でおすすめの機能・設定のTipsまとめ
zenn.dev
GitHub Copilot のコミットメッセージ生成のルールがカスタムできるようになった！
zenn.dev
ESLintのignoresは一番上に書かないといけない
const eslintConfig = [
{
ignores: ['**/node_modules/**', '**/.next/**', '**/out/**', '**/build/**', '**/next-env.d.ts'],
...compat.extends('next/core-web-vitals', 'next/typescript'),
// ...
},
];その他の設定例:
忙しい人のためのESLint Flat Configの設定例（主要なプラグイン込み）
zenn.dev
HeroUIを個別に使う
TailwindCSS v4編。
pnpm add -E @heroui/themehero.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}';
/* ... */
