TailwindcssのPreflightを無効化するユースケースについて

こんにちわ。nap5です。

TailwindcssのPreflightを無効化するユースケースについて紹介したいと思います。

Preflight - Tailwind CSS

サードパーティーのコンポーネントライブラリを使用するNextjsをベースとした開発時にコンポーネント個別のスタイリング（emotionなど）を優先させたいが、読み込み順を制御できずに、困っているときが今回のユースケースに該当します。（ビルド後はtailwindcssはハッシュ値を持つファイル名にバンドルされてpreloadしてくれてるので、意図した挙動に制御できているように見えます。）

まとめると、開発時でもビルド後でも同じ挙動・体感でワークアラウンドしていきたいというのが達成したいことになります。

ここでは、PreflightはリセットCSSのようなものです。

Tailwindの書き味を残しつつJoyやChakuraなどのコンポーネントライブラリのハンディさを生かしていきたい場合は、このPreflightを無効化することでスタイリングの競合を制御できました。

かといってTailwindの機能が無効化されるわけではないので、かなり便利なオプション引数だなーと思いました。

/** @type {import('tailwindcss').Config} */
module.exports = {
  corePlugins: {
    // preflight: true,
    preflight: false,
  },
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    fontFamily: {
      kosugi: ['Kosugi', 'sans-serif'],
      noto: ['Noto Sans JP', 'sans-serif'],
      inter: ['Inter', 'sans-serif'],
    },
    extend: {},
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
    require('tailwind-capitalize-first-letter'),
    require('tailwindcss-no-scrollbar'),
    require('tailwindcss-global-dark'),
  ],
};

若干趣旨が異なる感じもしますが、似たようなスレは以下にありました。

頭の片隅にいれておくと、役に立つと思ったのでした。

簡単ですが、以上です。