Design comparison
Solution retrospective
For some reason, the compiled CSS on Netlify is a little bit different from the compiled CSS on my PC. There are 2 CSS rules missing. I tried hosting it on Cloudflare Pages, but the same problem occurred.
As you can see on the live site, the missing styles are .dicebutton-fetching
and .dicebutton-hover
, which are responsible for the hover state and the active state. The source of these styles are from the @layer utilities
in my input.css.
@layer utilities { .dicebutton-standby { @apply opacity-100; } .dicebutton-fetching { @apply opacity-50; } .dicebutton-hover { background-color: rgb(90, 252, 76); box-shadow: 0 0 30px 5px rgb(21, 248, 248); } a { @apply text-gray-50; } }
The strange thing is, a
and .dicebutton-standby
made it through. They don't disappear, even though they all came from the same place.
Any idea why this happens? Thanks!
Community feedback
- @wendyhamelPosted about 2 years ago
Hi, I think the problem is that the classes do not show up in the HTML. Tailwind looks for the classes you are actually using in your project. In your tailwind config file, you include
content: ["./index.html", "script.js"]' but the script file is actually calles
script.ts` So Tailwind doesn't see these classes when building for production.I don't see why you need the separate hover classes with @apply. Or for the
a
tags? You could just do this with Tailwind classes in the HTML and adding the custom color and box-shadow in the tailwind config file by extending the theme. Or am I missing something?Happy coding!
Marked as helpful1@invictus1032Posted about 2 years ago@wendyhamel Ahh, right. I didn't include
script.ts
becausetsc
will compile it toscript.js
anyway, and that's what the browser uses. Now that you mention it, I realized that the build script consisted of building the css first, and the js second. Now it all makes sense because thescript.js
didn't exist when tailwind was compiling the css. So, I just simply swapped the build orders and now everything worked as expected. Thanks a lot, man!0@invictus1032Posted about 2 years ago@wendyhamel
"I don't see why you need the separate hover classes with @apply."
Sorry, i don't quite understand what do you mean. I didn't use
@apply
for the hover class. I just used regular css. As for why I did it with utility class instead of extending the theme, I just find it more convenient, because it's not like I'll need to use the box-shadow again.As for the
a
's utility class, there are 2a
elements on the footer and I don't like repeating what I write.0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord