613eb58cba27cf2408fb7b8bcc7215f97fb9baf6
SmartTiket - React + Tailwind CSS v4 + Google Fonts
This is a clean, modern, and highly-optimized setup for SmartTiket using React 19, Vite 6, Tailwind CSS v4, and Google Fonts.
🛠️ Tech Stack & Configuration
- React 19 & Vite 6: Fast hot module replacement (HMR) and ultra-fast builds.
- Tailwind CSS v4: Built using the new
@tailwindcss/viteplugin. Configuration is handled entirely inside the CSS file utilizing the@themedirective. - Google Fonts:
- Outfit (Headers & Display)
- Plus Jakarta Sans (Body text)
- Lucide React: Lightweight, beautiful icon set pre-installed.
🚀 How to Run
Follow these simple steps in your terminal to start the development server:
1. Install Dependencies
npm install
2. Run the Development Server
npm run dev
3. Open in Browser
Visit the local URL shown in your terminal (usually http://localhost:5173) to view the successful setup screen.
📂 Project Structure
smart_tiket/
├── src/
│ ├── App.jsx # Main React Component & Welcome Screen
│ ├── index.css # Tailwind CSS v4 imports + custom @theme configuration
│ └── main.jsx # React 19 mounting entry point
├── index.html # HTML Shell importing custom Google Fonts
├── package.json # Dependencies (React, Vite, Tailwind v4, Lucide)
├── vite.config.js # Vite 6 config with official React & Tailwind plugins
└── README.md # Documentation
🎨 Customizing the Design System
To add more custom fonts, colors, or transitions, open src/index.css and declare them inside the @theme block:
@theme {
/* Extending font family */
--font-custom: 'My Font', sans-serif;
/* Custom Tailwind v4 colors */
--color-gold: #fbbf24;
}
You can now immediately use font-custom and bg-gold / text-gold inside any React component!
Description
Languages
TypeScript
95.1%
CSS
2.3%
HTML
1.4%
JavaScript
1.2%