Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
nsadeh opened this issue Jan 22, 2023 · 1 comment
Open

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

nsadeh opened this issue Jan 22, 2023 · 1 comment

Comments

@nsadeh
Copy link

nsadeh commented Jan 22, 2023

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

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
Copy link
Author

nsadeh commented Jan 22, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant