-
Notifications
You must be signed in to change notification settings - Fork 147
Description
Is this a bug report?
Yes
Environment
node -v: v19.3.0npm -v: 9.2.0yarn --version(if you use Yarn): n/anpm ls create-elm-app -g(if you haven’t ejected): I have ejected, but the output is
└── create-elm-app@5.22.0
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
ringanddrop-shadowand their variants - Running
elm-app startwith 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 --serverfrom thebuilddirectory. - Most styles will work, but
ringanddrop-shadowstyles 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.

