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

   git clone <repository-url>
   cd khy_website
   

2. Install Tailwind CSS

   npm install -D tailwindcss@^3.4.0
   

3. Generate the optimized CSS

   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:

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:

# 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