feat: add tailwind

README.md

@@ -1,2 +1,107 @@
 # 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