electrichasgoneaudi.github.io

All you ever need to know about electric Audis

Unofficial website dedicated to comprehensive information about all-electric Audi vehicles.

Development Setup

Prerequisites

• Hugo (static site generator)
• Node.js (for CSS build process)

Installation

1. Clone the repository

git clone https://github.com/electrichasgoneaudi/electrichasgoneaudi.github.io.git
cd electrichasgoneaudi.github.io

2. Install dependencies

npm install

3. Build initial CSS

npm run build-css-prod

CSS Workflow (Tailwind CSS)

This project uses Tailwind CSS with a custom build process for optimal performance and developer experience.

File Structure

├── src/
│   └── input.css          # Source Tailwind CSS file
├── static/css/
│   ├── tailwind.css       # Generated CSS (do not edit)
│   └── custom.css         # Legacy styles
├── tailwind.config.js     # Tailwind configuration
└── package.json           # Build scripts

Available Scripts

Development

# Watch for changes and rebuild CSS automatically
npm run css-watch

# Run both CSS watcher and Hugo server together
npm run dev

Production

# Build minified production CSS
npm run build-css-prod

# Build entire site for production
npm run build

Development Workflow

1. Start development servers (RECOMMENDED):

   # Run both CSS watcher and Hugo server together
   npm run dev

   This is the preferred method as it ensures Tailwind CSS rebuilds automatically when you add new classes.

2. Alternative - separate terminals:

   # Terminal 1: Start CSS watcher
   npm run css-watch
   
   # Terminal 2: Start Hugo server
   hugo server

3. Making CSS changes:

   • Edit src/input.css for Tailwind utilities and custom components
   • Use @apply directives for component styling
   • Add/modify Tailwind classes in HTML templates
   • CSS will automatically rebuild when files change

4. Adding new Tailwind classes:

   • Update tailwind.config.js for custom colors, fonts, or extensions
   • Restart CSS watcher after config changes:

     # Stop current watcher (Ctrl+C)
     npm run css-watch

⚠️ Common Issue: Tailwind Arbitrary Values Not Working

Problem: When using arbitrary values like h-[500px], md:h-[720px], or bg-[#ff0000], the styles don't apply.

Cause: Running hugo server alone doesn't trigger Tailwind CSS rebuilds. Tailwind needs to scan your HTML files and detect new classes to include them in the generated CSS.

Solutions:

1. Always use npm run dev instead of just hugo server
2. Or run npm run css-watch in a separate terminal before making changes
3. After adding arbitrary values, manually rebuild CSS with npm run build-css-prod

Alternative: Use inline styles (style="height: 720px;") for one-off values that don't need to be reusable.

Important Notes

• Never edit static/css/tailwind.css directly - it's auto-generated
• CSS purging is enabled - only used classes are included in final build
• Custom legacy styles remain in static/css/custom.css
• Bootstrap classes removed - all styling now uses Tailwind CSS

Troubleshooting

CSS not updating

1. Stop CSS watcher (Ctrl+C)
2. Delete static/css/tailwind.css
3. Run npm run build-css-prod
4. Restart development workflow

Missing classes

• Check tailwind.config.js content paths
• Ensure file extensions are included
• Restart CSS watcher after config changes

Performance issues

• Use npm run build-css-prod for minified production CSS
• Consider removing unused custom CSS from custom.css

Hugo Development

Local development

hugo server
# Site available at http://localhost:1313

Building for production

hugo --minify
# Output in ./public/

Contributing

When contributing changes that affect styling:

1. Follow the Tailwind CSS workflow above
2. Test changes locally with npm run dev
3. Build production CSS with npm run build-css-prod
4. Commit both source changes and generated CSS
5. Include screenshots for visual changes