Laravel11はもうインストールされているものとする。Dockerならbitnami/laravel:11.1.1あたりを持ってくるとすぐできる。

ReactはTypeScriptです。

Tailwindcssの導入

npmでインストール

とりあえず、本体と使いそうなライブラリ2つ。（ライブラリはいらんかもしれん）

npm install -D sass tailwindcss postcss autoprefixer

Typography…h*などの典型的なレイアウト、LineClamp…省略…を作る、Forms…フォーム関連、Aspect Ratio…画像のアスペクト比の調整をするライブラリをインストール（いらんかもしれん）

npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/aspect-ratio @tailwindcss/line-clamp

resources/css/app.scss でTailwindcssを使うようにする

/* resources/css/app.scss */
@tailwind base;
@tailwind components;
@tailwind utilities;

vite.config.jsでコンパイル対象にする。

laravel → input に前述のapp.scssを入れる。

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.scss'],

レイアウトファイルにviteでコンパイルしたファイルを読み込むようにする。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'My App' }}</title>
    @vite(['resources/css/app.scss'])

tailwind.config.jsを書き換える

viteにTialwindcssをコンパイルするタイミングを指定させる。

resourcesディレクトリの blade.php/CSS ファイルを監視してコンパイル。pluginsにも4つのインストールしたTailwindcssのプラグインの指定。

import typography from '@tailwindcss/typography';
import forms from '@tailwindcss/forms';
import aspectRatio from '@tailwindcss/aspect-ratio';
import lineClamp from '@tailwindcss/line-clamp';
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.scss',
    "./resources/**/*.js", 
    "./resources/**/*.tsx",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    typography,
    forms,
    aspectRatio,
    lineClamp
  ],
}

ReactをTypeScriptで導入する

必要なnodeモジュールのインストール

別に2回に分ける必要は全くないんですが。

npm install -D react react-dom @types/react @types/react-dom
npm install -D @vitejs/plugin-react typescript

TypeScriptのconfigを作る

tsconfig.jsonを作る。

npx tsc --init --jsx react-jsx

vite.config.jsにapp.tsxを追加

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.scss', 'resources/ts/app.tsx'],

レイアウトファイルにviteでコンパイルしたapp.tsxを読み込むようにし、Reactのマウントポイント<div id="app">も作る。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'My App' }}</title>
    @vite(['resources/css/app.scss',  'resources/ts/app.tsx'])

Reactの起点app.tsxを作成

import React from 'react';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container!); 
root.render(
        <div>
            Hello, world!
        </div>
);

npm run dev

npm run devして開発。

tohokuaikiのチラシの裏

技術的ネタとか。

Laravel11でReact(TypeScript)とTailwindcss(SASS)を使う