Tailwind CSS ホームページ
  1. インストール
  2. Remix で Tailwind CSS をインストールする

  1. プロジェクトを作成する

    Remix プロジェクトをまだセットアップしていない場合は、新しく作成することから始めます。最も一般的な方法は、Create Remix を使用することです。

    ターミナル
    npx create-remix@latest my-projectcd my-project

  2. Tailwind CSS をインストールする

    npm 経由で tailwindcss をインストールし、init コマンドを実行して tailwind.config.ts ファイルを生成します。

    ターミナル
    npm install -D tailwindcssnpx tailwindcss init --ts

  3. テンプレートパスを設定する

    tailwind.config.ts ファイルにすべてのテンプレートファイルへのパスを追加します。

    tailwind.config.ts
    import type { Config } from 'tailwindcss'

export default {
  content: ['./app/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

  4. CSS に Tailwind ディレクティブを追加する

    ./app/tailwind.css ファイルを作成し、Tailwind の各レイヤーに @tailwind ディレクティブを追加します。

    tailwind.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

  5. CSS ファイルをインポートする

    新しく作成した ./app/tailwind.css ファイルを ./app/root.jsx ファイルにインポートします。

    root.tsx
    import stylesheet from "~/tailwind.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet },
];

  6. ビルドプロセスを開始する

    npm run dev でビルドプロセスを実行します。

    ターミナル
    npm run dev

  7. プロジェクトで Tailwind を使い始める

    Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定し始めます。

    index.tsx
    export default function Index() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}