Tailwind には、開発者の人間工学のためのインラインスタイルの配置という利点があり、Remix がインポートするための CSS ファイルを生成できます。生成された CSS ファイルは、大規模なアプリケーションでも一般的に妥当なサイズに収まります。そのファイルを app/root.tsx のリンクにロードすれば完了です。

CSS について特に意見がない場合は、これが最適なアプローチです。

Tailwind を使用するには、まず開発依存関係としてインストールします。

npm install -D tailwindcss

次に、設定ファイルを初期化します。

npx tailwindcss init --ts

これで、クラスを生成するファイルを指定できます。

tailwind.config.ts

import type { Config } from "tailwindcss";
 
export default {
  content: [
    "./app/**/{**,.client,.server}/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

次に、CSS に @tailwind ディレクティブを含めます。たとえば、アプリのルートに tailwind.css ファイルを作成できます。

app/tailwind.css

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

次に、ルートルートの links 関数に tailwind.css を追加します。

app/root.tsx

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
 
// ...
 
import styles from "./tailwind.css?url";
 
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
];

この設定が完了すると、CSS のどこでも Tailwind の関数とディレクティブを使用できます。以前に使用したことがない場合、Tailwind はソースファイルでユーティリティクラスが検出されなかったという警告を表示することに注意してください。

Tailwind はデフォルトでは古いブラウザ用の CSS をコンパイルしないため、Autoprefixer のような PostCSS ベースのツールを使用してこれを実現したい場合は、Remix の組み込み PostCSS サポートを活用する必要があります。PostCSS と Tailwind の両方を使用する場合、Tailwind プラグインが欠落している場合は自動的に含まれますが、必要に応じて PostCSS 設定に Tailwind プラグインを手動で含めることもできます。

VS Code を使用している場合は、最高の開発者エクスペリエンスのために Tailwind IntelliSense 拡張機能をインストールすることをお勧めします。

Tailwind の `@import` 構文の回避

Tailwind の @import 構文 (例: @import 'tailwindcss/base') は、Tailwind ディレクティブ (例: @tailwind base) を優先して避けることをお勧めします。

Tailwind はインポートステートメントをインライン CSS に置き換えますが、これによりスタイルとインポートステートメントがインターリーブされる可能性があります。これは、すべてのインポートステートメントがファイルの先頭にある必要があるという制限と衝突します。

または、PostCSS を postcss-import プラグインとともに使用して、esbuild に渡す前にインポートを処理することもできます。

Tailwind の @import 構文の回避

Tailwind

Tailwind の @import 構文の回避

Tailwind の `@import` 構文の回避