Next.js v15 + TypeScript + Tailwind CSS v4 Template

Modern Web Development Template

A modern, ready-to-use template for building web applications with Next.js v15, TypeScript, and Tailwind CSS v4, featuring a comprehensive theming system with dark mode support.

🎨

Complete Theme System

Semantic color variables for consistent design

🌓

Dark Mode Support

Built-in dark mode with system preference detection

⚛️

Next.js v15 with App Router

The React framework for production applications

🧹

ESLint & Prettier

Linting and formatting for consistent code quality

Theme Examples

UI Components

Card Component

Example card using the theme system with dynamic colors.

Success TagWarning Tag

Warning alert message using theme colors

Error alert message using theme colors

Theme Usage Examples

// Background colors
<div className="bg-l-bg-1 dark:bg-d-bg-1">...</div>

// Text colors
<p className="text-l-text-2 dark:text-d-text-2">...</p>

// Border colors
<div className="border border-border-l dark:border-border-d">
  ...
</div>

// Accent colors
<button className="bg-accent-1">Primary</button>
<div className="text-accent-success">Success</div>

Color Palette

l-bg-1
l-bg-2
l-bg-3
l-text-1
l-text-2
d-bg-1
d-bg-2
d-bg-3
d-text-1
d-text-2
accent-1
accent-2
accent-success
accent-warning
accent-danger

Getting Started

# Clone the repository
git clone [repository-url] my-project
cd my-project

# Install dependencies
npm install

# Start development server
npm run dev

For complete documentation, please refer to the README.md file in the repository.