最新rails8でreact & typescript & tailwindcssを一緒に使う方法！

はじめに

rails8でreact & typescript & tailwindcssを使って動作検証をしたい時はないでしょうか？
私はございましてセットアップを行いましたので備忘録を残しておきます！

環境

❯ ruby -v                                                  
ruby 3.3.6 

❯ rails -v                                                 
Rails 8.0.0

railsのセットアップ

以下のように実行することで、tailwindを最初から使用でき、reactを後から簡単に導入できる形でrailsをnewできます

rails new react-rails --javascript esbuild --css tailwind

テストで軽くtailwindが使えているか見ます

 bundle exec rails g controller tests index

app/views/tests/index.html.erb

<h1 class="text-orange-700">Tests#index</h1>
<p>Find me in app/views/tests/index.html.erb</p>

サーバーを立ち上げます

./bin/dev

http://127.0.0.1:3000/tests/indexにアクセスすると以下のように表示できました

reactのセットアップ

以下のコマンドでreactのライブラリ関連をインストールします

yarn add react react-dom

yarn add -D @types/react @types/react-dom

以下のようなファイルを追加します

app/javascript/Test.tsx

import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('root');

const root = createRoot(container);

document.addEventListener('DOMContentLoaded', () => {
  root.render(
    <>
      <h1 className="text-blue-600">呼ばれたよ</h1>
    </>
  );
});

先ほどのindex.html.erbを以下のように修正します

app/views/tests/index.html.erb

<h1 class="text-orange-700">Tests#index</h1>
<p>Find me in app/views/tests/index.html.erb</p>

<%= javascript_include_tag "Test", defer: true %>

<div id="root"></div>

tailwind.config.jsの設定を変更します

tailwind.config.js

     // './app/javascript/**/*.js'
     './app/javascript/**/*.*' //こう変更する

サーバーを立ち上げます

./bin/dev

http://127.0.0.1:3000/tests/indexにアクセスすると以下のように表示できました

最後に

弊社CBcloudではエンジニアの募集を行なっております！
https://recruit.cb-cloud.com/

railsもいっぱい書けますので、rubyやrailsが大好きな仲間を募集してます！