👌

【2025年1月更新】React19 + TailwindCss4 作成手順

2025/01/25に公開

アプリケーション立ち上げ

// フォルダ作成&移動後
% npm create vite@latest .

// React + SWCを選択

react-router-domの導入

% npm install react-router-dom
main.tsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { BrowserRouter} from "react-router-dom";

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <BrowserRouter>
      <App />    
    </BrowserRouter>
  </StrictMode>,
)
App.tsx
import {Route,Routes} from "react-router-dom";

import {Home} from './pages/Home';
import {About} from './pages/About';

const AppRoutes = () => {
  return (
    <>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </>
  )
}

export default AppRoutes;
App.tsxの実装例
import {
  Route,
  Routes,
  Link
} from "react-router-dom";

import {AlignJustify, Home as HomeIcon, UserIcon} from 'lucide-react';

import {Home} from './pages/Home';
import {About} from './pages/About';
import { useState } from "react";

const AppRoutes = () => {
  const [sidebarSize, setSidebarSize] = useState('narrow');

  const changeSidebarSize = () => {
    setSidebarSize(sidebarSize === 'large' ? 'narrow' : 'large');
  }

  const links = [
    {to: '/', label: 'Home', icon: HomeIcon},
    {to: '/about', label: 'About', icon: UserIcon}
  ];


  return (
    <>
      <header className='bg-gray-800 text-white p-4 navbar'>
        <AlignJustify size={24} onClick={()=>changeSidebarSize()}/>

        <div className=" card-title text-2xl mx-3">テストアプリ</div>
          
      </header>

      <div className="drawer drawer-open">
        <input id="my-drawer" type="checkbox" className="drawer-toggle" />

        <div className="drawer-content">
          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/about' element={<About />} />
          </Routes>
        </div>

        <div className="drawer-side">
          <label htmlFor="my-drawer" aria-label="close sidebar" className="drawer-overlay"></label>

          <ul className="menu bg-base-200 text-base-content min-h-full items-center p-2 ">
            {/* Sidebar content here */}
            {links.map((link, index) => (
              <li key={index}>
                <Link to={link.to}>
                  <link.icon size={20} className="my-1"/>
                  <div className={sidebarSize==='large'? "w-40 ml-2":"hidden"}>{link.label}</div>
                </Link>
              </li>
            ))}

            <div className=" divider"></div>

            <li className=""></li>
          </ul>
        </div>
      </div>
    </>
  )
}

export default AppRoutes;

各ページは以下のように適当に作る

pages/About.tsx
import React from 'react'

export const About = () => {
  return (
    <div>About</div>
  )
}

CSSフレームワーク、アイコンライブラリを導入

2025年1月現在tailwindcssの最新バージョンは4.0です。
daisyui 4はtailwindcss 4に対応していないので、ベータ版ですが5をインストールします

% npm install tailwindcss @tailwindcss/vite
% npm i -D daisyui@beta
% npm install lucide-react
vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'  //追加

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],  //追加
})
src/index.css
@import "tailwindcss";
@plugin "daisyui";

この時点でpackage.jsonは以下の通りです

クリックして展開
package.json
{
  "name": "front",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.0.0",
    "lucide-react": "^0.474.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^7.1.3",
    "tailwindcss": "^4.0.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
    "@types/react": "^18.3.18",
    "@types/react-dom": "^18.3.5",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "daisyui": "^5.0.0-beta.2",
    "eslint": "^9.17.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "globals": "^15.14.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.18.2",
    "vite": "^6.0.5"
  }
}

Discussion