UnoCSS resetパッケージでTailwind CSS Preflightを導入して未来のTailwind採用の余白を持たせるメモ📝

プロジェクトの初期段階でTailwind CSSを導入するかどうか迷うことがあると思いますが、Tailwindのリセットスタイル（Preflight）だけを取り入れておくと今後Tailwindを導入したくなった際にもスムーズに導入できて良いかなと思い、個人的に最近UnoCSS resetパッケージを使ってTailwind CSSのPreflightをリセットCSSを利用することが多いので導入方法とかをメモ📝

• UnoCSS resetとは？
• 導入方法
  • パッケージのインストール
  • リセットCSSの導入
• なぜTailwind Preflightだけを導入するのか？

UnoCSS resetとは？

UnoCSSはAtomicなCSSエンジンで、Tailwind CSSと互換性のあるユーティリティクラスを提供しています。UnoCSS自体を使わなくても、@unocss/resetパッケージを単独で使うことができ、これにはTailwind CSS Preflightも含まれています。

github.com

導入方法

パッケージのインストール

まずは@unocss/resetをインストールします。

npm install @unocss/reset

package.jsonに追加されるのはこんな感じです：

{
  "dependencies": {
    "@unocss/reset": "^66.0.0"
    // その他の依存関係
  }
}

リセットCSSの導入

CSSファイル（reset.cssなど）を作成し、次のようにインポートします：

@import "@unocss/reset/tailwind.css";

たったこれだけで、Tailwind CSS Preflightと同等のリセットスタイルが適用されます。シンプルですね！ ✨

なぜTailwind Preflightだけを導入するのか？

Tailwindを採用していなくてもPreflightはリセットCSSとしていい感じに思っていて、

tailwindcss.com

そもそも元になっている modern-normalize もアクティブにメンテされておりよく使われているリセットCSSです。

github.com

現状使う想定はあまりないがTailwindの採用の余白を残しておきたいという場合に、 Preflightをすでに使っていれば、スタイルの一貫性を保ったまま移行できる点が良いかなと感じています。