Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Focus visible doesn't work with @apply in CSS module
See original GitHub issueWhat version of Tailwind CSS are you using?
3.0.0-alpha.2
What build tool (or framework if it abstracts the build tool) are you using?
Next 12.0.4
What version of Node.js are you using?
v16.13.0
What browser are you using?
Chrome
What operating system are you using?
MacOS
Reproduction URL
Test.module.css
.testClass {
@apply focus-visible:ring-4 focus-visible:ring-teal-300;
}
Describe your issue
Focus visible doesn’t work using @apply with CSS modules as of 3.0 alpha 2. It works fine if I revert back to alpha 1.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:4
- Comments:11 (1 by maintainers)
Top Results From Across the Web
focus-visible - CSS: Cascading Style Sheets - MDN Web Docs
The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics ...
Read more >:focus-visible and backwards compatibility - TPGi
For this reason, modern browsers apply simple heuristics to determine whether or not to apply their default focus styling.
Read more >chrome issue with :focus-visible? (shows ...
To me, this says that ALL input elements should always match :focus-visible . In the example that you referenced, you'll notice that the...
Read more >focus-visible
Based on the proposed CSS :focus-visible pseudo-selector, ... when the polyfill is loaded and .focus-visible is not applied to the element:.
Read more >Better Focus Indicators Using the `:focus-visible` Pseudo-Class
The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the user agent determines via heuristics that the ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Same issue with
focusand tailwindcss 2.2.19.The issue comes with @apply in CSS module and without using the same utilities in the global css file or in className.
reproduction: https://codesandbox.io/s/youthful-sky-9ktgf?file=/src/pages/index.tsx
edit: updated example with tailwindcss 3.0.0 -> https://codesandbox.io/s/patient-platform-pm5qx?file=/src/pages/index.tsx