Static Files

Overview¶

SpeedPy uses WhiteNoise for serving static files and Tailwind CSS for styling. Media files are served via an Nginx container in development.

WhiteNoise¶

WhiteNoise serves static files directly from the Django application, eliminating the need for a separate web server for static assets.

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "whitenoise.middleware.WhiteNoiseMiddleware",
    ...
]

WHITENOISE_USE_FINDERS = True
WHITENOISE_AUTOREFRESH = DEBUG  # Auto-refresh in development

Static File Settings¶

STATIC_URL = env.str("STATIC_URL", default="/static/")
STATIC_ROOT = env.str("STATIC_ROOT", default=BASE_DIR / "staticfiles")
STATICFILES_DIRS = [
    BASE_DIR / "static",
    ("floating-core", BASE_DIR / "node_modules" / "@floating-ui" / "core" / "dist"),
    ("floating-ui", BASE_DIR / "node_modules" / "@floating-ui" / "dom" / "dist"),
]

Tailwind CSS¶

Tailwind is configured in tailwind.config.js with dark mode support, custom color themes, and several plugins.

Building CSS¶

# One-time build
docker compose run --rm web npm run tailwind:build
# or
make twb

# Watch mode (rebuilds on changes)
docker compose run --rm web npm run tailwind:watch
# or
make tw

Tailwind compiles from static/mainapp/input.css to static/mainapp/styles.css. SpeedPy UI component classes live in static/mainapp/input.css inside Tailwind's @layer components; use those reusable classes in templates instead of repeating long utility strings.

Tailwind Directories¶

SpeedPy includes a generate_tailwind_directories management command that creates a tailwind_directories.json file. This file lists additional directories for Tailwind's content scanner to check for class names.

docker compose run --rm web python manage.py generate_tailwind_directories

Plugins¶

Tailwind is configured with: - @tailwindcss/forms — form element styling - @tailwindcss/typography — prose typography

Media Files¶

Media files (user uploads like team logos) are stored in the media/ directory and served via an Nginx container in development:

media:
  image: nginx
  volumes:
    - ./media:/usr/share/nginx/html
  ports:
    - "127.0.0.1:9001:80"

MEDIA_ROOT = env("MEDIA_ROOT", default=BASE_DIR / "media")
MEDIA_URL = env("MEDIA_PATH", default="/media/")

In production, configure your web server or CDN to serve the media directory.

Collecting Static Files¶

For production deployment, collect static files into STATIC_ROOT:

python manage.py collectstatic --noinput

WhiteNoise will serve these files with proper caching headers.