Submitted about 2 years ago

Advice Generator App with Tailwind + TypeScript

invictus•120

@invictus1032

Preview site View code

This is a solution for...Advice generator app

HTML
CSS
JS
API

2junior

Design comparison

SolutionDesign

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

Wendy•1,990
@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 callesscript.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 helpful
1
invictus•120
@invictus1032Posted about 2 years ago
@wendyhamel Ahh, right. I didn't include script.ts because tsc will compile it to script.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 the script.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
invictus•120
@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 2 a elements on the footer and I don't like repeating what I write.
0
Wendy•1,990
@wendyhamelPosted about 2 years ago
@invictus1032 Ah, not I get it! That makes sense.
0
Wendy•1,990
@wendyhamelPosted about 2 years ago
@invictus1032 Glad my comment was of use to you.
0

Please log in to post a comment

Join 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