reroute-js 0.46.0 → 1.0.0-alpha.1

package/README.md

@@ -179,11 +179,9 @@ Reroute is a feature-rich file-based routing framework for building fullstack Re
 - ⚡ **React 19 Streaming** - Native `renderToReadableStream` for optimal performance
 
 ### 🎨 Styling & Theming
-- 🎨 **Tailwind CSS v4 Support** - Automatic detection and compilation with CSS-first configuration
+- 🎨 **Native CSS** - Author styles in `src/client/index.css` with no CSS framework required
 - ⚡ **Live CSS Reload** - Instant style updates in development mode
-- 🎯 **Modern CSS Features** - `@theme` and `@utility` directives support
-- 🚀 **Oxide Engine** - 5x faster builds with the new Tailwind compiler
-- 🔧 **Zero Config** - Works out of the box when `@tailwindcss/cli` is installed
+- 🔧 **Zero Config** - Theme CSS is synced automatically during `reroute gen`
 
 ### 🎨 Developer Experience
 - 📁 **Project Templates** - Quick start with `basic`, `blog`, or `store` templates

package/_/store/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "{{PROJECT_NAME}}",
 	"version": "0.0.0",
-	"description": "A Reroute store application with Tailwind CSS v4",
+	"description": "A Reroute store application",
 	"private": true,
 	"scripts": {
 		"types": "tsc --noEmit",
@@ -23,8 +23,6 @@
 		"@types/bun": "latest",
 		"@types/react": "^19.2.2",
 		"@types/react-dom": "^19.2.2",
-		"@tailwindcss/cli": "^4.1.16",
-		"tailwindcss": "^4.1.16",
 		"typescript": "^5"
 	}
 }

package/_/store/src/client/components/Header.tsx

@@ -2,34 +2,22 @@ import { Link } from 'reroute-js/react';
 
 export default function Header() {
 	return (
-		<header className='sticky top-0 z-50 bg-white border-b border-gray-200 shadow-sm'>
+		<header className='site-header'>
 			<div className='container-custom'>
-				<div className='flex items-center justify-between h-16'>
-					<Link
-						to='/'
-						className='flex items-center gap-2 text-2xl font-bold text-primary-600 hover:text-primary-700 transition-colors'
-					>
-						<span className='text-3xl'>🛒</span>
+				<div className='header-inner'>
+					<Link to='/' className='header-logo'>
+						<span className='header-logo-icon'>🛒</span>
 						<span>Reroute Store</span>
 					</Link>
 
-					<nav className='flex items-center gap-8'>
-						<Link
-							to='/'
-							className='link-muted font-medium hover:text-primary-600'
-						>
+					<nav className='header-nav'>
+						<Link to='/' className='nav-link'>
 							Home
 						</Link>
-						<Link
-							to='/products'
-							className='link-muted font-medium hover:text-primary-600'
-						>
+						<Link to='/products' className='nav-link'>
 							Products
 						</Link>
-						<Link
-							to='/categories'
-							className='link-muted font-medium hover:text-primary-600'
-						>
+						<Link to='/categories' className='nav-link'>
 							Categories
 						</Link>
 					</nav>

package/_/store/src/client/components/ProductCard.tsx

@@ -8,12 +8,9 @@ interface ProductCardProps {
 
 export default function ProductCard({ product }: ProductCardProps) {
 	return (
-		<div className='card card-hover group'>
-			<Link
-				to={`/products/${product.id}`}
-				className='block h-full no-underline text-inherit'
-			>
-				<div className='w-full h-60 bg-gray-50 flex items-center justify-center p-4'>
+		<div className='card card-hover product-card'>
+			<Link to={`/products/${product.id}`} className='product-card-link'>
+				<div className='product-card-image-wrap'>
 					<Image
 						src={product.image}
 						alt={product.title}
@@ -21,25 +18,21 @@ export default function ProductCard({ product }: ProductCardProps) {
 						height={180}
 						quality={75}
 						sizes='(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 180px'
-						className='max-w-full max-h-full object-contain relative z-10 bg-white'
+						className='product-card-image'
 						style={{ viewTransitionName: `product-image-${product.id}` }}
 					/>
 				</div>
 
-				<div className='p-4 flex flex-col gap-2 flex-1'>
+				<div className='product-card-body'>
 					<div className='badge-primary'>{product.category}</div>
 
-					<h3 className='text-base font-semibold text-gray-900 leading-normal line-clamp-2 min-h-[3em] group-hover:text-primary-600 transition-colors'>
-						{product.title}
-					</h3>
+					<h3 className='product-card-title'>{product.title}</h3>
 
-					<div className='flex justify-between items-center mt-auto pt-2'>
-						<span className='text-xl font-bold text-primary-600'>
-							${product.price.toFixed(2)}
-						</span>
+					<div className='product-card-footer'>
+						<span className='price'>${product.price.toFixed(2)}</span>
 
 						{product.rating && (
-							<div className='flex items-center gap-1 text-sm text-gray-600'>
+							<div className='product-rating'>
 								<span>⭐</span>
 								<span>
 									{product.rating.rate} ({product.rating.count})