⛳

RemixでTailwind CSSを使う

2024/04/06に公開

Tailwind CSS

Remix

tech

バージョンは
remix: 2.81.
tailwind: 3.4.3
です。

remixのプロジェクトは以下で生成した初期プロジェクトとなっています。

npx create-remix@latest

こちらを参考に進めていきます。

必要なものをインストールして、initします。

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init --ts -p

initを実行すると以下のようにファイルが２つ生成されます。

Created Tailwind CSS config file: tailwind.config.ts
Created PostCSS config file: postcss.config.js

postcss.config.js

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.ts

import type { Config } from 'tailwindcss'

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config

パスの設定

tailwindを適用させるファイルのパスを指定します。
app/配下のjs, jsx, ts, tsxファイルを対象としています。

tailwind.configs.ts

import type { Config } from "tailwindcss";

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

tailwind.cssを以下のように新規作成します。

app/tailwind.css

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

route.tsxでCSSを読み込むように設定します。

app/route.tsx

import { LinksFunction } from "@remix-run/node";
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import stylesheet from "~/tailwind.css?url";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return <Outlet />;
}

// こちらを追加しています
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: stylesheet },
];

tailwindが適用されているか確認します。
以下のようにtailwindを使ったコードを追加してみます。

app/routers/_index.tsx

// 追加
<h1 className="text-3xl font-bold underline">Hello world!</h1>

無事適用されていました。

パスの設定

Discussion