codesandbox / codesandbox/codesandbox-client
Tailwind Focus Ring isn't working on Codesandbox. Works locally.
Open
Nobody has claimed this yet.
Needs Triaging
- Dominant language
- JavaScript
- Stars
- 13.6k
- Forks
- 2.4k
- Avg merge
- 6d 19h
- Merged PRs (30d)
- 2
Description
🐛 bug report
Preflight Checklist
- I have read the
Contributing Guidelines
for this project. - I agree to follow the
Code of Conduct
that this project adheres to. - I have searched the issue tracker for an issue that matches the one I want
to file, without success.
Description of the problem
I have a focus ring locally like:
I tried to set up a demo project in Tailwind but the focus ring just doesn't work.
To Reproduce
Just type the following in a Codesandbox with Tailwind:
<div className="w-10 h-10 bg-red-600 rounded-full focus:outline-none ring-4 ring-offset-2 ring-red-500"></div>
Or click the link below.
Link to sandbox: https://codesandbox.io/s/mobx-theme-color-change-p1j6r
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by opening the linked CodeSandbox and reproducing the provided Tailwind markup, then trace how the sandbox loads and applies Tailwind styles. Done means the focus ring appears in CodeSandbox as it does locally, with the reproduction confirmed against the supplied example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, tailwindcss
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100