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.

Sign up for GitHub

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

Jump to bottom

Play CDN : peer-checked:custom-class do not work anymore with 3.0.12 #6961

Closed
PlanetIrata opened this issue Jan 7, 2022 · 2 comments
Closed

Play CDN : peer-checked:custom-class do not work anymore with 3.0.12 #6961

PlanetIrata opened this issue Jan 7, 2022 · 2 comments

Comments

@PlanetIrata
Copy link

PlanetIrata commented Jan 7, 2022 •
edited

What version of Tailwind CSS are you using?

The Play CDN version (https://cdn.tailwindcss.com), so the latest one available (v3.0.12 now)

What build tool (or framework if it abstracts the build tool) are you using?

None

What version of Node.js are you using?

Not relevant but v16

What browser are you using?

Electron => Chrome 96

What operating system are you using?

macOS

Describe your issue

This peer/peer-checked radio-button was perfectly working before release of version 3.0.12 with Tailwind included from the CDN

Important Note: In the code below, I apply a CLASS (.ringed-item) with peer-checked. This was working before the release of the 3.0.12. Now it doesn't work, but applying a simple style like peer-checked:bg-indigo-500 stil works.

So the issue is with the peer-checked:my-custom-class like this:

<head>
  <script src="https://cdn.tailwindcss.com"></script>

  <style type="text/tailwindcss">
    .ringable-item { 
      @apply shadow-sm text-xs text-gray-900 hover:ring-2 hover:ring-indigo-200 hover:bg-gray-50;
    }

    .ringed-item { 
      @apply ring-2 ring-indigo-500 bg-indigo-100;
    }
  </style>

</head>

(...)

<label>
    <input type="radio"  class="peer hidden">
    <p class="ringable-item peer-checked:ringed-item">
</label>
@PlanetIrata PlanetIrata changed the title Play CDN : peer/peer-checked do not work anymore with 3.0.12 Play CDN : peer-checked:custom-class do not work anymore with 3.0.12 Jan 7, 2022
@reinink
Copy link
Member

reinink commented Jan 7, 2022 •
edited by adamwathan

Hey there!

So I'm surprised that would have ever worked. You technically can't use variants with custom CSS unless it's been defined in a layer, like this:

@layer components {
  .ringable-item { 
   @apply shadow-sm text-xs text-gray-900 hover:ring-2 hover:ring-indigo-200 hover:bg-gray-50;
  }

  .ringed-item { 
    @apply ring-2 ring-indigo-500 bg-indigo-100;
  }
}

Give that a try, and you should be good to go 👍

Also, for your info, you can read more about adding custom components and utilities on the "Adding Custom Styles" page here: https://tailwindcss.com/docs/adding-custom-styles#using-modifiers-with-custom-css

@reinink reinink closed this as completed Jan 7, 2022
@PlanetIrata
Copy link
Author

@reinink Works perfectly, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@reinink @PlanetIrata