mirror of
https://git.kh3group.com/georgebiri/khy_website.git
synced 2026-07-02 06:13:30 +00:00
107 lines
2.5 KiB
Markdown
107 lines
2.5 KiB
Markdown
# khy_website
|
|
|
|
A clean, minimal static website built with HTML, JavaScript, and Tailwind CSS.
|
|
|
|
## Quick Start
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js (for Tailwind CSS CLI)
|
|
- npm (comes with Node.js)
|
|
|
|
### Setup Instructions
|
|
|
|
1. **Clone or download the project**
|
|
|
|
```bash
|
|
git clone <repository-url>
|
|
cd khy_website
|
|
```
|
|
|
|
2. **Install Tailwind CSS**
|
|
|
|
```bash
|
|
npm install -D tailwindcss@^3.4.0
|
|
```
|
|
|
|
3. **Generate the optimized CSS**
|
|
|
|
```bash
|
|
npx tailwindcss -i ./src/input.css -o ./styles/main.css
|
|
```
|
|
|
|
4. **Open the website**
|
|
- Open `index.html` in your web browser
|
|
- Or serve it with a local server
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
my-site/
|
|
├─ index.html # Main website page
|
|
├─ src/
|
|
│ └─ input.css # Tailwind directives
|
|
├─ styles/
|
|
│ └─ main.css # Generated optimized CSS
|
|
├─ scripts/
|
|
│ └─ main.js # JavaScript functionality
|
|
├─ assets/
|
|
│ ├─ images/ # Image assets
|
|
│ └─ fonts/ # Font assets
|
|
├─ tailwind.config.js # Tailwind configuration
|
|
└─ package.json # Dependencies
|
|
```
|
|
|
|
## Development
|
|
|
|
### For Active Development
|
|
|
|
If you're making frequent changes to the HTML, you can use watch mode to automatically regenerate CSS:
|
|
|
|
```bash
|
|
npx tailwindcss -i ./src/input.css -o ./styles/main.css --watch
|
|
```
|
|
|
|
Keep this running in a terminal while you work. It will automatically rebuild the CSS whenever you save changes to your HTML files.
|
|
|
|
### Manual Regeneration
|
|
|
|
If watch mode doesn't work or you prefer manual control:
|
|
|
|
```bash
|
|
# One-time build
|
|
npx tailwindcss -i ./src/input.css -o ./styles/main.css
|
|
|
|
# Watch mode (auto-regenerate on changes)
|
|
npx tailwindcss -i ./src/input.css -o ./styles/main.css --watch
|
|
```
|
|
|
|
**Note:** If watch mode doesn't work, just run the one-time build command after each change.
|
|
|
|
### What This Does
|
|
|
|
- Scans your HTML files for used Tailwind classes
|
|
- Generates only the CSS you need (purges unused styles)
|
|
- Creates a tiny, optimized CSS file (~1KB vs ~3MB CDN)
|
|
|
|
## Features
|
|
|
|
- **Clean, minimal design** with Tailwind CSS
|
|
- **Optimized performance** with purged CSS
|
|
- **Responsive layout** that works on all devices
|
|
- **No build tools required** for production
|
|
- **Easy maintenance** with Tailwind utility classes
|
|
|
|
## Customization
|
|
|
|
To add new Tailwind classes:
|
|
|
|
1. Add the classes to your HTML
|
|
2. Run the CSS generation command
|
|
3. The new styles will be included in the output
|
|
|
|
To modify the design:
|
|
|
|
1. Change Tailwind classes in `index.html`
|
|
2. Regenerate CSS with the CLI command
|
|
3. Refresh your browser to see changes
|