feat: initialize project with React 19, TypeScript, and Tailwind CSS v4 support

This commit is contained in:
Kevin Satria D
2026-05-20 10:42:57 +07:00
parent b1c3ddffe0
commit 84eca45e35
11 changed files with 3985 additions and 21 deletions

View File

@@ -1,8 +1,8 @@
import { useState } from 'react'
import { CheckCircle2, Terminal, ArrowRight, Layers, Sparkles } from 'lucide-react'
import { CheckCircle2, Terminal, Layers, Sparkles } from 'lucide-react'
export default function App() {
const [count, setCount] = useState(0)
const [count, setCount] = useState<number>(0)
return (
<div className="min-h-screen bg-slate-950 flex flex-col items-center justify-center relative overflow-hidden px-4 selection:bg-indigo-500 selection:text-white">
@@ -16,7 +16,7 @@ export default function App() {
{/* Status Badge */}
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold tracking-wide mb-8 animate-pulse">
<CheckCircle2 className="w-3.5 h-3.5" />
<span>SETUP SUCCESSFUL</span>
<span>SETUP SUCCESSFUL (TSX)</span>
</div>
{/* Heading using Google Font 'Outfit' */}
@@ -26,7 +26,7 @@ export default function App() {
{/* Body using Google Font 'Plus Jakarta Sans' */}
<p className="font-sans text-slate-400 text-base sm:text-lg leading-relaxed mb-8">
Welcome to your new development environment. React 19, Tailwind CSS v4, and Google Fonts are successfully configured and ready.
Welcome to your new development environment. React 19, Tailwind CSS v4, TypeScript, and Google Fonts are successfully configured and ready.
</p>
{/* Feature Checkmarks */}
@@ -42,7 +42,7 @@ export default function App() {
<div className="w-5 h-5 rounded-md bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
<Layers className="w-3.5 h-3.5 text-indigo-400" />
</div>
<span className="font-sans text-sm font-medium">Tailwind CSS v4 &amp; Nesting Integration</span>
<span className="font-sans text-sm font-medium">Tailwind CSS v4 &amp; TypeScript</span>
</div>
<div className="flex items-center gap-3 text-slate-300">

View File

@@ -1,9 +1,9 @@
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import App from './App'
import './index.css'
createRoot(document.getElementById('root')).render(
createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>,