Some tailwind classes are not being served by the build output
nsadeh opened this issue · 1 comments
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
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
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 :(