Remix ViteでTailwind CSSを統合する

前提

npx create-remix@latest --template remix-run/remix/templates/viteで作ったプロジェクトであることを前提に進めます。

公式ドキュメントではRemix Viteの場合のTailwind CSSの利用方法が
ふわっとしか書かれていないので、統合方法を纏めました。

ステップ1: 必要なパッケージのインストール

プロジェクトのルートディレクトリで以下のコマンドを実行し、必要なパッケージをインストールします。

npm i tailwindcss postcss autoprefixer

ステップ2: 設定ファイルの生成

Tailwind CSSとPostCSSの設定ファイルを生成します。

npx tailwindcss init -p

ステップ3: Tailwindの設定

ステップ2で作ったtailwind.config.jsを開き、Tailwindがスタイルを適用するファイルを指定します。

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

ステップ4: Tailwindのスタイルを適用する

tailwind.cssファイルを作成し、以下のTailwindディレクティブを追加します。

@tailwind base;
@tailwind components;
@tailwind utilities;

ステップ5: RemixでCSSをインポート

app/root.jsx（app/root.tsx）で、先ほど作成したCSSファイルのインポート文を追記します。

import './tailwind.css' // 追加

ステップ6: 開発サーバーの起動

最後に、開発サーバーを起動します。

npm run dev