この記事を読んだ後に理解できること

Tailwind CSSの概要
RemixにTailwind CSSを導入する手順

Tailwind CSSとは？

概要

Tailwind CSSとはCSSのフレームワークです。

Bootstrapなどと比べると細かい単位でCSSを適用することが可能で、カスタマイズ性も高いことが特徴です。

多くのフロントエンドフレームワークでTailwind CSSのサポートが搭載されています。

今回紹介するRemixでもサポートされています。

その他にもNext.jsではデフォルトでTailwind CSSを利用することができます。

使用例

Tailwind CSSでは以下のようにCSSを適用することができます。

<button class="bg-blue-500 text-white px-4 py-2 rounded">Click me</button>

Tailwind CSSでは指定の文言をclassに指定するだけでCSSを反映させることができます。

基本的なCSSは指定文言が用意されており、すぐに使うことができます。

例えば、display: flexを反映させたい場合は、反映させたいhtmlのclassにflexと記載するだけです。

<div class="flex"></div>

用意されていないCSSを使いたい場合は、configファイルにclass名に指定する文言とCSSに関する情報追加するだけです。

import type { Config } from 'tailwindcss'

export default {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      // ここに追加する！
      height: {
        116: '29rem',
      }
    },
  },
  plugins: [],
} satisfies Config

上記ファイルで追加したheightを反映させる場合は、以下のように指定します。

<div class="h-116"></div>

RemixにTailwind CSSを導入する手順

Tailwind CSSをインストールする

$ npm install -D tailwindcss

tailwind.config.tsを作成する

Tailwind CSSの設定ファイルを作成します。

$ npx tailwindcss init --ts

以下の内容のファイルが作成されます。

import type { Config } from "tailwindcss";

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

Remixのtsxファイル等を対象に指定する

contentの配列に以下の文字列を指定してください。

import type { Config } from "tailwindcss";

export default {
  // 配列の中に文字列で指定する
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

rootディレクトリにtailwind.cssファイルを作成する

ファイルには以下を記載してください。

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

appディレクトリ配下のroute.tsxに設定を反映させる

以下の内容について追加してください。

import styles from "./tailwind.css";

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

これで設定は完了です。

tsx、jsxでTailwind CSSを使う場合はclassではなくclassNameに文言を指定する必要があります。

// hoge.tsx
export default function Index() {
  return (
    <div className="flex"></div>
  )
}

参考

RemixにTailwind CSSを導入する手順について解説

目次