51 lines
2.5 KiB
Markdown
51 lines
2.5 KiB
Markdown
---
|
|
# nuzlocke-tracker-52rw
|
|
title: 'Bug: Tailwind typography plugin unresolvable in Docker dev container'
|
|
status: completed
|
|
type: bug
|
|
priority: deferred
|
|
created_at: 2026-03-20T19:23:06Z
|
|
updated_at: 2026-03-20T20:26:50Z
|
|
---
|
|
|
|
## Problem
|
|
|
|
After commit 1cd1389 added `@tailwindcss/typography` and the `@plugin '@tailwindcss/typography'` directive in `index.css`, the frontend Docker dev container fails to start with:
|
|
|
|
```
|
|
[plugin:@tailwindcss/vite:generate:serve] Can't resolve '@tailwindcss/typography' in '/app/src'
|
|
```
|
|
|
|
## Root Cause
|
|
|
|
The `docker-compose.yml` volume mount `./frontend/src:/app/src:cached` overlays the host's `src/` directory into the container. The new `src/index.css` contains `@plugin '@tailwindcss/typography'`, which Tailwind's Vite plugin tries to resolve starting from `/app/src/`.
|
|
|
|
Two possible causes:
|
|
1. **Stale Docker image** — If the image wasn't rebuilt after `@tailwindcss/typography` was added to `package.json`, the container's `node_modules` doesn't have the package. Fix: `docker compose build frontend` or `docker compose up --build`.
|
|
2. **Resolution path issue** — Tailwind v4's `@plugin` resolution may not walk up to `/app/node_modules` from `/app/src/index.css`. This would be a persistent issue even after rebuilding.
|
|
|
|
## Fix
|
|
|
|
- [x] Rebuild the Docker image and test if the error persists (FIXED - error was due to stale image)
|
|
- [~] If it persists after rebuild, add volume mounts (N/A - not needed, rebuild fixed it)
|
|
- [~] If resolution is the issue, consider moving the `@plugin` directive (N/A - not needed)
|
|
- [x] Verify the frontend starts correctly in Docker with `docker compose up frontend`
|
|
|
|
## Files
|
|
|
|
- `docker-compose.yml` (line 27: src volume mount)
|
|
- `frontend/src/index.css` (line 2: `@plugin '@tailwindcss/typography'`)
|
|
- `frontend/package.json` (line 22: `@tailwindcss/typography` dependency)
|
|
- `frontend/Dockerfile`
|
|
|
|
## Summary of Changes
|
|
|
|
The issue was caused by a **stale Docker image** that was built before `@tailwindcss/typography` was added to `package.json`. The cached `npm ci` layer didn't include the new dependency.
|
|
|
|
**Resolution:** Running `docker compose build frontend` rebuilt the image with the updated dependencies. After rebuild:
|
|
- The frontend container starts correctly
|
|
- The `@plugin '@tailwindcss/typography'` directive resolves successfully
|
|
- The `.prose` typography styles are included in the compiled CSS
|
|
|
|
**No code changes required.** This is a documentation of the root cause for future reference - users experiencing this error should rebuild their Docker images.
|