Tailwind classes not compiling in prod
- Dominant language
- Elixir
- Stars
- 1.3k
- Forks
- 134
- PR merge metrics
- No merged PRs in 30d
Description
### Environment
* Elixir version (elixir -v): 1.17.3
* Phoenix version (mix deps): 1.7.11
* Phoenix LiveView version (mix deps): ~> 1.0
* Beacon version (mix deps): 0.3
* Operating system: Mac OS
* Browsers on which you attempted to reproduce this bug (the more the merrier): Chrome, Safari
### Actual behavior
Beacon config includes `tailwind_css` and `tailwind_config` to pull in `app.css` and `beacon.tailwind.config.bundle.js` exactly as shown in [the guides](https://github.com/BeaconCMS/beacon/blob/main/guides/recipes/reuse-app-css.md).
In production environment, app-based live_component's CSS is not compiled (ie it's missing in the stylesheet) when viewing a page created in Beacon. For example, my live component includes the class `px-3` but it is not being defined in the page's stylesheet.
In dev environment, classes are defined as expected.
Contributor guide
Research direction
Start with Beacon's `tailwind_css` and `tailwind_config` settings and the guide's `app.css` and `beacon.tailwind.config.bundle.js`; compare how production and development asset compilation use them. Verify the production stylesheet generated for a Beacon page contains the `px-3` class definition.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- elixir, tailwindcss
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100