Utility classes like sm: and hover: not working with vite/vue

[roymckenzie]

I am sure this is due to something I am doing wrong, but utility classes like sm:, md:, hover: do not seem to be working in my project.

I used npm create vue@latest to create the base of the project and followed the Tailwind install guide.

When I have something like:

    <h1 class="text-4xl md:text-6xl">Title</h1>

The styles for the md:text-6xl class are empty in the inspector:

The same happens with hover:underline. underline works fine, but prepending hover: shows an empty class definition in the inspector.

Any hints as to what I might be doing wrong?

Thank you!

[wongjn]

The dev tools show empty definitions because the "outer" selector matches. However, there is nothing in that rule so it is empty. The :hover. @media rules are nested and will only show their definitions when they actually apply (i.e. when hovering or when the screen is wide enough).

[roymckenzie]

Certainly. You can pull this down and run

npm install
npm run dev

[wongjn]

Seems to be working as expected:

[roymckenzie]

I noticed that. LOL. Well in Arc it seems to work fine. In Chrome, it does not work. I am wondering if I have some sort of problem with my Chrome browser?

Here is a link to the Github Codespace site.

Chrome:

Arc:

[wongjn]

Seems to be working in Chrome for me too. Perhaps check your Chrome is sufficiently recent, something like 120 for nesting support in dev mode. Also, consider checking if any browser extensions could be causing issues.

[roymckenzie]

Yes. I just checked my Chrome version and it was Version 111.0.5563.64 (Official Build) (x86_64). The autoupdate process for my Chrome installation seems to have been failing for quite some time. I just updated to the latest: Version 132.0.6834.160 (Official Build) (x86_64). Things seem to be running fine now. I will close this. Thank you for your help.