create-elm-app
create-elm-app copied to clipboard
Some tailwind classes are not being served by the build output
Is this a bug report?
Yes
Environment
-
node -v
: v19.3.0 -
npm -v
: 9.2.0 -
yarn --version
(if you use Yarn): n/a -
npm ls create-elm-app -g
(if you havenβt ejected): I have ejected, but the output is
βββ [email protected]
Then, specify:
- Operating system: macOS Monterey 12.8
- Browser and version (if relevant):
Steps to Reproduce
(Write your steps here:)
- Create an elm app, eject, and install Tailwind according to the docs.
- Use any tailwind classes, including
ring
anddrop-shadow
and their variants - Running
elm-app start
with Tailwind refresh running/up-to-date Tailwind files, every style works as intended - After running
elm-app build
, serve the build directory. I discovered this in production, but also reproduced locally usingnpx browser-sync start --server
from thebuild
directory. - Most styles will work, but
ring
anddrop-shadow
styles will not render. In the dev tools, the HTML has the classes specified but the style menu does not recognize them as classes that have styles associated with them. - This is true in any browser.
Note that the CSS file in the build directory does reference these styles but something is broken.
Expected Behavior
I would expect that development matches production exactly, that is, any style that works when developing (elm-app start
) works in production, on the same browser/version.
Less importantly but still nice, I would expect that any Tailwind utility classes work, if Tailwind is installed and configured correclty.
Actual Behavior
When running elm-app start
, all styles in Tailwind that I tried to use worked. When serving the output of elm-app build
, most styles still did except for (at least) 2: ring
and drop-shadow
.

The above is a screenshot of a running elm-app start
process. Notice the style of the input, as well as the computed styles from main.css
in the dev tools

The above is a screenshot of the same moments later, running npx browser-sync start --server
from the build directory after running elm-app build
. Notice that the styles don't render, although the classes can be seen in the dev tools menu.
Reproducible Demo
https://github.com/nsadeh/cea-demo
After playing around for a while I suspect the issue is with an old minifier. I tried updating but ran into a bunch of npm dependency hell errors :(