search

halfzebra / create-elm-app

🍃 Create Elm apps with zero configuration
MIT License
1.68k stars 149 forks source link

Some tailwind classes are not being served by the build output #610

Open nsadeh opened 1 year ago

nsadeh commented 1 year ago

Is this a bug report?

Yes

Environment

  1. node -v: v19.3.0
  2. npm -v: 9.2.0
  3. yarn --version (if you use Yarn): n/a
  4. npm 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:

  1. Operating system: macOS Monterey 12.8
  2. Browser and version (if relevant):

Steps to Reproduce

(Write your steps here:)

  1. Create an elm app, eject, and install Tailwind according to the docs.
  2. Use any tailwind classes, including ring and drop-shadow and their variants
  3. Running elm-app start with Tailwind refresh running/up-to-date Tailwind files, every style works as intended
  4. 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.
  5. 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.
  6. 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.

Screen Shot 2023-01-22 at 11 14 36 AM

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

Screen Shot 2023-01-22 at 11 16 46 AM

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

nsadeh commented 1 year ago

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 :(