Data attribute modifier doesn't work with numeric values #14026
Assignees
Comments
This was referenced Jul 23, 2024
philipp-spiess
added a commit
that referenced
this issue
Jul 24, 2024
) Fixes #14026 See #14040 for the v4 fix When translating `data-` and `aria-` modifiers with attribute selectors, we currently do not wrap the target attribute in quotes. This only works for keywords (purely alphabetic words) but breaks as soon as there are numbers or things like spaces in the attribute: ```html <div data-id="foo" class="data-[id=foo]:underline">underlined</div> <div data-id="f1" class="data-[id=1]:underline">not underlined</div> <div data-id="foo bar" class="data-[id=foo_bar]:underline">not underlined</div> ``` Since it's fairly common to have attribute selectors with `data-` and `aria-` modifiers, this PR will now wrap the attribute in quotes unless these are already wrapped. | Tailwind Modifier | CSS Selector | | ------------- | ------------- | | `.data-[id=foo]` | `[data-id='foo']` | | `.data-[id='foo']` | `[data-id='foo']` | | `.data-[id=foo_i]` | `[data-id='foo i']` | | `.data-[id='foo'_i]` | `[data-id='foo' i]` | | `.data-[id=123]` | `[data-id='123']` | --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
|
Hey @flauwekeul! Sorry for reaching out a few hours too late but wanted to let you know that we'll be fixing this in the next patch release 🙂 Thank you so much for reporting this! |
|
Thanks! I saw the fix was merged already. Happy to contribute to this great lib 😃 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What version of Tailwind CSS are you using?
3.4.6
What build tool (or framework if it abstracts the build tool) are you using?
Vite 5.3.3 (no Vue/React/Angular)
What version of Node.js are you using?
20.12.1
What browser are you using?
Any browser
What operating system are you using?
MacOS
Reproduction URL
https://play.tailwindcss.com/urhLO2C0Zj
Describe your issue
When the
data-*modifier is used and thedataattribute has a numeric value, the class isn't applied.The text was updated successfully, but these errors were encountered: