Web Development

この Blog で使用している Tailwind CSS を v3 から v4 にアップグレードしてみた

Tailwind CSS の最新バージョンである v4 が正式リリースになりました。そこで、Tailwind CSS v3 を使用してる当 Blog も、v4 にアップグレードしてみることに。移行にあったって修正が必要になった点をまとめます。

公開日
更新日

先日ですが、Tailwind CSS の最新バージョンである v4.0 （本記事を書いている時点では v4.0.1） が正式リリースになりました。

上記参考記事の通り、その変更内容については簡単にこの Blog でも書いたのですが、試しに手元のいくつかの Tailwind CSS 使用プロジェクトを v3 から v4 にバージョンアップ （アップグレート） してみることに。

ちょうどこの Blog も Tailwind CSS を使用しているサイトのひとつなので、v3 （v3.4.17） から v4 にするにあたって行った作業を簡単にまとめてみようと思います。

ちなみに、この Blog を Tailwind CSS （+ Astro.js） でリニューアルした際に書いた記事は下記になります。

上記記事を読んでいただくとわかるのですが、もともと書いていた CSS と統合する関係で HTML に対してユーティリティクラスを直接書いていく通常の方法ではなく、外部の CSS ファイルに @apply ディレクティブを使用してスタイルを記述するというちょっとイレギュラーな書き方をしているため、v3 から v4 への移行に関してもそこそこ楽でした （理由は後述）。

不要なパッケージの削除とアップグレード

Tailwind CSS v3 までは、外部 CSS のインポートに PostCSS が必要でしたけども、v4 では標準でサポートしたため、単純に CSS ファイル内で @import を書けばよくなりました。よって、postcss-import を使用している場合はもう使いません。私の環境では使用していたので削除。

また、この Blog の場合は、Astro を使用していますけども、Astro が提供する @astrojs/tailwind も v4 では使用しません （今後、Tailwind CSS v4 に対応するとは思いますが） ので、こちらも削除しました。

不要になったパッケージを削除したら、一旦、Tailwind CSS も削除して、新たに Tailwind CSS v4、さらに追加で必要なパッケージをインストールします。

npm install tailwindcss @tailwindcss/vite @tailwindcss/postcss

astro.config.mjs の修正

astro.config.mjs は元々下記のようになっていました。build 関連のオプションは当サイトの都合によるのであまり気にしないでください。また、@astrojs/sitemap を使用している関係で、エラーページが sitemap.xml に含まれないように除外設定などを書いていますが、これも当サイトの都合です。

// 変更前（v3）
import { defineConfig } from 'astro/config';
import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";

export default defineConfig({
  site: 'https://hyper-text.org',
  build: {
    assets: 'static/v9/css',
    inlineStylesheets: 'never',
  },
  compressHTML: true,
  vite: {
    build: {
      minify: false,
    },
  },
  integrations: [
    tailwind(),
    sitemap(
      {
        filter: (page) =>
          page !== 'https://hyper-text.org/err/403/' &&
          page !== 'https://hyper-text.org/err/404/' &&
          page !== 'https://hyper-text.org/err/500/',
      }
    )
  ],
});

これを下記のように変更します。

// 変更後（v4）
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
import sitemap from "@astrojs/sitemap";

export default defineConfig({
  site: 'https://hyper-text.org',
  build: {
    assets: 'static/v9/css',
    inlineStylesheets: 'never',
  },
  compressHTML: true,
  vite: {
    plugins: [tailwindcss()],
    build: {
      minify: false,
    },
  },
  integrations: [
    sitemap(
      {
        filter: (page) =>
          page !== 'https://hyper-text.org/err/403/' &&
          page !== 'https://hyper-text.org/err/404/' &&
          page !== 'https://hyper-text.org/err/500/',
      }
    )
  ],
});

基本的には、下記の変更をしただけです。

  • import tailwind from "@astrojs/tailwind"; を import tailwindcss from '@tailwindcss/vite'; に書き換え
  • integrations 内にあった tailwind(), を削除して、vite 内に plugins: [tailwindcss()], を記述

postcss.config.mjs の修正

postcss.config.mjs は元々下記のようになっていました。

// 変更前（v3）
export default {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
    cssnano: {
      preset: [
        "default",
        {
          minifyFontValues: {
              removeQuotes: false,
          },
        },
      ],
    },
  }
}

Tailwind CSS v4 では、postcss-import が不要になっていますし、autoprefixer の機能も標準でやってくれるようになりました。また、tailwindcss/nesting は @tailwindcss/postcss にお任せしますので、その辺を削除しつつ、以下のように修正します。

// 変更後（v4）
export default {
  plugins: {
    "@tailwindcss/postcss": {},
    cssnano: {
      preset: [
        "default",
        {
          minifyFontValues: {
              removeQuotes: false,
          },
        },
      ],
    },
  }
}

tailwind.config.mjs の移行

Tailwind CSS v4 では、tailwind.config.mjs は不要になります。すべて CSS ファイルに記述しますので設定内容を移行していきます。

v3 で使用していた tailwind.config.mjs は下記のような内容でした。

// Tailwind CSS v3.x で使用していた設定
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
      extend: {
        fontFamily: {
          'body': ['"Noto Sans JP Variable"', 'sans-serif'],
          'en': ['Roboto', 'sans-serif'],
          'pre': ['"Source Code Pro Variable"', 'monospace'],
        },
    },
  },
  plugins: [require('@tailwindcss/typography'),],
}

この Blog の場合はたいした設定はしていなくて、いくつかのフォント設定と、プラグインとして @tailwindcss/typography を読み込んでいただけなので移行は簡単です。

src/layouts・Layout.astro で読み込んでいる （当 Blog の場合は元々読み込んでいましたが、@astrojs/tailwind を使用している場合は明示的に CSS ファイルを読み込んでいないと思いますので、作成して読み込む必要があります）、src/styles/styles.css は下記のような内容でした。

/* Tailwind CSS v3.x で使用していた src/styles/styles.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "./article-body.css";
@import "./sitesearch.css";

@layer components {
  header {
    @apply bg-neutral-800 text-neutral-50;
    .block-header {
      @apply relative max-w-7xl mx-auto flex justify-between items-center gap-0 h-14 px-4;
    }
    /* ...略... */
  }
  /* ...その他、ここにスタイルを色々と記述 */
}

これを下記のように修正します。

/* Tailwind CSS v4 用に修正した src/styles/styles.css */
@import "tailwindcss";
@import "./article-body.css";
@import "./sitesearch.css";

@theme {
    --font-body: "Noto Sans JP Variable", sans-serif;
    --font-en: Roboto, sans-serif;
    --font-pre: "Source Code Pro Variable", monospace;
}

@plugin "@tailwindcss/typography";

@layer components {
  /* ...略... */
}

まず、フォント設定については @theme ディレクティブ内に記述することでそのまま移行可能です。外部プラグインの読み込みも、@plugin ディレクティブに書けばよいので簡単。

ちなみに、もし複雑な設定を tailwind.config.mjs に色々書いていて、移行が面倒くさいという場合は、以下のように @config ディレクティブを使用してそのまま読み込むことも可能です。

@import "tailwindcss";
@config "../../tailwind.config.mjs";

それから、この Blog はやってませんけども、ダークモードへの切り替えを class 名の変更 （例えば body 要素に .dark が付与されている場合はダークモードのような） で行っているような場合 （要するに tailwind.config.mjs で darkMode: 'class' としていた場合ですね） は、下記のように記述することで同様の設定が可能です。

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

その他、細かい確認

Tailwind CSS v4 では、v3 系までに存在したいくつかのユーティリティクラスが削除されたり、リネームされています。詳しくは、下記、公式ドキュメントにまとまっていますので、確認して、class 名の書き換えを行う必要があります。

特に下記のリネームに関しては当 Blog ではそれなりの箇所該当しました。とはいえ、幸いこの Blog では CSS の記述が外部 CSS ファイルにまとまっていたため、一斉置換でそこまで手間はかからず。これが大規模なプロジェクトで、HTML 側にユーティリティクラスが書かれている通常の使用方法だとちょっと面倒くさいかもしれません。

  • shadow-sm → shadow-xs
  • shadow → shadow-sm
  • rounded-sm → rounded-xs
  • rounded → rounded-sm

あとは npm run dev して各ページを確認し、問題なさそうなら移行完了です。

さて、Tailwind CSS v3 から v4 への移行についてまとめてみました。とりあえずこの Blog 程度の規模であればそこまで大変ではなかったですが、これが大量のコンポーネントを含むような大きめのプロジェクトだったりすると結構面倒くさいかもしれません。

ただ、Tailwind CSS は設定を CSS に書けたりと、CSS への理解度が高い人であれば使いやすくなった部分も多いですし、postcss-import や autoprefixer など、今まで PostCSS が必要だった部分を標準でやってくれるようになったり、便利な部分も多々ありますので、個人的には早めに移行していきたいなと思っております。

記事をここまで御覧頂きありがとうございます。
この記事が気に入ったらサポートしてみませんか？

Ofuse でおやつをおごる

関連記事