67 lines
2.0 KiB
Markdown
67 lines
2.0 KiB
Markdown
# 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/vite` plugin. Configuration is handled entirely inside the CSS file utilizing the `@theme` directive.
|
|
* **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
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### 2. Run the Development Server
|
|
```bash
|
|
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
|
|
|
|
```text
|
|
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:
|
|
|
|
```css
|
|
@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!
|