はじめに
この記事では、Remixを使用してWebアプリケーションを作成し、Tailwind CSSを使用して入力フォームを作成する方法について説明します。
また、ホットリロードの設定方法も紹介します。
Remixアプリケーションの作成
まず、Remixアプリケーションを作成します。ターミナルで以下のコマンドを実行します。
npx create-remix@latest
プロンプトが表示されたら、プロジェクト名、テンプレート、デプロイ先、TypeScriptの使用有無、インストール方法を選択します。
次に、プロジェクトディレクトリに移動します。
cd my-remix-app
Tailwind CSSのインストールと設定
Tailwind CSSをインストールします。
npm install -D tailwindcss postcss autoprefixer concurrently
Tailwind CSSの設定ファイルを生成します。
npx tailwindcss init -p
tailwind.config.jsファイルを開き、contentセクションを更新します。
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
この設定により、appディレクトリ内のすべてのJavaScript、TypeScript、JSX、TSXファイルでTailwind CSSが使用できるようになります。
Tailwind CSSのスタイルシートの追加
app/root.tsxファイルを開き、Tailwind CSSのスタイルシートをインポートします。
import { cssBundleHref } from "@remix-run/css-bundle";
import type { LinksFunction } from "@remix-run/node";
import styles from "./tailwind.css";
import {
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "@remix-run/react";
export const links: LinksFunction = () => [
...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
{ rel: "stylesheet", href: styles },
];
ここでは、@remix-run/css-bundleからcssBundleHrefをインポートし、links関数内で使用しています。これにより、Remixがビルド時にCSSをバンドルし、適切なCSSファイルを読み込むことができます。
また、app/tailwind.cssファイルを作成し、以下の内容を追加します。
@tailwind base;
@tailwind components;
@tailwind utilities;
これらのディレクティブにより、Tailwind CSSのベーススタイル、コンポーネント、ユーティリティクラスが生成されます。
入力フォームの作成
app/routes/index.tsxファイルを開き、入力フォームを追加します。
export default function Index() {
return (
<div className="container mx-auto mt-8">
<h1 className="text-2xl font-bold mb-4">Welcome to Remix</h1>
<form className="space-y-4">
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700">
Name
</label>
<input
type="text"
id="name"
className="mt-1 block w-full rounded-md border-blue-500 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email
</label>
<input
type="email"
id="email"
className="mt-1 block w-full rounded-md border-blue-500 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
/>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-gray-700">
Message
</label>
<textarea
id="message"
rows={4}
className="mt-1 block w-full rounded-md border-blue-500 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
/>
</div>
<button
type="submit"
className="inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
Submit
</button>
</form>
</div>
);
}
ここでは、Tailwind CSSのクラス名を使用して、入力フォームを作成しています。
ホットリロードの設定
ホットリロードを設定するには、package.jsonファイルを開き、scriptsセクションを更新します。
"scripts": {
"build": "remix build",
"dev": "concurrently \"npm run dev:css\" \"remix dev\"",
"dev:css": "tailwindcss -w -i ./app/tailwind.css -o ./app/tailwind.generated.css",
},
この設定により、npm run devコマンドを実行すると、Tailwind CSSのウォッチモードが有効になり、CSSファイルが変更されるたびに自動的に再ビルドされます。
開発サーバーの起動
最後に、開発サーバーを起動します。
npm run dev
ブラウザでlocalhost:3000を開くと、Remixアプリケーションが表示され、青色の入力フォームが複数表示されるはずです。CSSファイルを変更すると、変更がすぐに反映されます。
まとめ
この記事では、RemixとTailwind CSSを使用して入力フォームを作成する方法について説明しました。Remixアプリケーションの作成、Tailwind CSSのインストールと設定、青色の入力フォームの作成、ホットリロードの設定について詳しく解説しました。
これらの手順に従うことで、Remixアプリケーションに簡単にTailwind CSSを導入し、スタイリッシュな入力フォームを作成できます。