👌
【2025年1月更新】React19 + TailwindCss4 作成手順
アプリケーション立ち上げ
// フォルダ作成&移動後
% 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