BeaconCMS / BeaconCMS/beacon

Tailwind classes not compiling in prod

Open
#726 0 comments 0 reactions 0 assignees View on GitHub
bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.