Frontend Mentor | Advice Generator App with Tailwind + TypeScript coding challenge solution

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,670

@wendyhamel

Posted over 1 year 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

invictus• 120

@invictus1032

Posted over 1 year 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!

invictus• 120

@invictus1032

Posted over 1 year 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.

Wendy• 1,670

@wendyhamel

Posted over 1 year ago

@invictus1032 Ah, not I get it! That makes sense.

Wendy• 1,670

@wendyhamel

Posted over 1 year ago

@invictus1032 Glad my comment was of use to you.

Advice Generator App with Tailwind + TypeScript

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community