⛳

Remix v2 に　Tailwind cssをインストールする

2024/04/14に公開

Tailwind CSS

Remix

tech

1.Remixのインストール

npx create-remix@latest

開発ディレクトリに移動

cd my-remix-app

開発用ビルドとランコマンドで起動

npm run dev

Remixのインストール完。

2.tailwindcssのインストール

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init --ts -p

./tailwind.config.tsを編集

tailwind.config.ts

import type { Config } from 'tailwindcss'

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

./app/にtailwind.cssファイルを作成する

tailwind.css

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

./app/root.tsxにコードを挿入する

root.tsx

import type { LinksFunction } from "@remix-run/node";
import stylesheet from "~/tailwind.css?url";

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

1.Remixのインストール

2.tailwindcssのインストール

Discussion