Flask Webpack TailwindCSS Application

A modern web application built with Flask, Webpack, and TailwindCSS. This setup provides a complete development environment with hot reloading, asset bundling, and utility-first CSS.

Features

• Flask: Python web framework for backend
• Webpack: JavaScript bundler with CSS processing
• TailwindCSS: Utility-first CSS framework
• Hot Reloading: Automatic browser refresh during development
• Modern Build Process: Optimized production builds

Project Structure

├── app.py                 # Flask application
├── requirements.txt       # Python dependencies
├── package.json          # Node.js dependencies
├── webpack.config.js     # Webpack configuration
├── tailwind.config.js    # TailwindCSS configuration
├── postcss.config.js     # PostCSS configuration
├── templates/            # Flask HTML templates
│   ├── base.html
│   ├── index.html
│   └── about.html
└── static/              # Static assets
    ├── src/             # Source files
    │   ├── js/
    │   │   └── main.js
    │   └── css/
    │       ├── main.css
    │       └── input.css
    ├── js/              # Compiled JavaScript
    ├── css/             # Compiled CSS
    └── images/          # Images

Setup Instructions

1. Install Python Dependencies

pip install -r requirements.txt

2. Install Node.js Dependencies

npm install

3. Build Assets

For development (with watch mode):

# Terminal 1: Build CSS
npm run build:css

# Terminal 2: Build JavaScript
npm run dev

For production:

npm run build

4. Run the Flask Application

python app.py

The application will be available at http://localhost:5000

Development Workflow

1. Start CSS watcher: npm run build:css (watches for TailwindCSS changes)
2. Start Webpack watcher: npm run dev (watches for JavaScript changes)
3. Start Flask server: python app.py (runs the web server)
4. Edit files: Make changes to templates, JavaScript, or CSS
5. See changes: Browser will automatically refresh

Available Scripts

• npm run build - Build production assets
• npm run dev - Build development assets with watch mode
• npm run build:css - Build TailwindCSS with watch mode

Customization

Adding New JavaScript Modules

1. Create new files in static/src/js/
2. Import them in main.js
3. Webpack will automatically bundle them

Adding New CSS

1. Create new files in static/src/css/
2. Import them in main.css
3. TailwindCSS will process them

Adding New Routes

1. Add routes in app.py
2. Create corresponding templates in templates/
3. Update navigation in base.html

Production Deployment

1. Build production assets: npm run build
2. Set Flask environment: export FLASK_ENV=production
3. Run with a production WSGI server like Gunicorn

Troubleshooting

Common Issues

1. Assets not loading: Make sure to run both CSS and JS build processes
2. TailwindCSS not working: Check that tailwind.config.js content paths are correct
3. Webpack errors: Ensure all dependencies are installed with npm install

Port Conflicts

If port 5000 is in use, modify app.py:

app.run(debug=True, port=5001)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - feel free to use this project as a starting point for your own applications.