You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Create an elm app, eject, and install Tailwind according to the docs.
Use any tailwind classes, including ring and drop-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 using npx browser-sync start --server from the build directory.
Most styles will work, but ring and drop-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.
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 isThen, specify:
Steps to Reproduce
(Write your steps here:)
ring
anddrop-shadow
and their variantselm-app start
with Tailwind refresh running/up-to-date Tailwind files, every style works as intendedelm-app build
, serve the build directory. I discovered this in production, but also reproduced locally usingnpx browser-sync start --server
from thebuild
directory.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.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 ofelm-app build
, most styles still did except for (at least) 2:ring
anddrop-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 frommain.css
in the dev toolsThe above is a screenshot of the same moments later, running
npx browser-sync start --server
from the build directory after runningelm-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
The text was updated successfully, but these errors were encountered: