Bun 利用時の TailwindCSS 導入方法 - ytak-sagit/game-of-life-react GitHub Wiki

手順

以下の通りに進めればOK（bun での読み替えは必要）

  1. TailwindCSS インストール
  2. 設定ファイルの追加
  3. 設定ファイルへのパスの追記
  4. index.css への設定追加

1. TailwindCSS インストール

$ bun add -d tailwindcss
bun add v1.1.25 (fe62a614)

installed [email protected] with binaries:
 - tailwind
 - tailwindcss

90 packages installed [5.17s]
$

2. 設定ファイルの追加

--ts フラグを追加し、TypeScriptで設定ファイルが生成されるようにする

$ bunx tailwindcss init --ts

Created Tailwind CSS config file: tailwind.config.ts
$

プロジェクトディレクトリ直下に tailwind.config.ts が生成されていればOK

3. 設定ファイルへのパスの追記

import type { Config } from 'tailwindcss'

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

4. index.css への設定追加

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

参考：チートシート

TailwindCSS のクラス名は、以下のサイトを見ると手っ取り早い