naopoyo.com
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About
  • Docs
  • Tags
  • Bookmarks
  • Tools
  • About

目次

© naopoyo

🚛

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

公開日
20日前
2025-10-02
更新履歴
GitHubで見る
  • 開発日記
  • Tailwind
  • CSS

TailWind CSS v4は便利だぞ

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

TailWind CSS v4は便利だぞ
zenn.dev favicon
zenn.dev
TailWind CSS v4は便利だぞ

メモ

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

Color Converter

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

Convert colors from HEX to HSL | Atmos
Convert colors freely between HEX, RGB, HSL, LCH and OKLCH formats. Simple and fast.
atmos.style favicon
atmos.style
Convert colors from HEX to HSL | Atmos

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

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

GitHub Copilot

GitHub Copilot関連でおすすめの機能・設定のTipsまとめ
zenn.dev favicon
zenn.dev
GitHub Copilot関連でおすすめの機能・設定のTipsまとめ
GitHub Copilot のコミットメッセージ生成のルールがカスタムできるようになった!
zenn.dev favicon
zenn.dev
GitHub Copilot のコミットメッセージ生成のルールがカスタムできるようになった!

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 favicon
zenn.dev
忙しい人のためのESLint Flat Configの設定例(主要なプラグイン込み)

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}';

/* ... */

目次

最近更新された記事

🛗
Rubocop個人的まとめ
1日前 - 2025年10月21日
  • Ruby
  • Rubocop
🌑
Railsを7から8にアップグレードする
3日前 - 2025年10月19日
  • Ruby
  • Rails
🚆
VS Codeでよく使うショートカット
6日前 - 2025年10月17日
  • VS Code