diff --git a/CHANGELOG.md b/CHANGELOG.md index f4e7fac0b71a..e297cedb59bb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,6 +38,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix missing `blocklist` member in the `Config` type ([#10239](https://github.com/tailwindlabs/tailwindcss/pull/10239)) - Escape group names in selectors ([#10276](https://github.com/tailwindlabs/tailwindcss/pull/10276)) - Consider earlier variants before sorting functions ([#10288](https://github.com/tailwindlabs/tailwindcss/pull/10288)) +- Allow variants with slashes ([#10336](https://github.com/tailwindlabs/tailwindcss/pull/10336)) ### Changed diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js index c33276464e59..c08cf1171236 100644 --- a/src/lib/generateRules.js +++ b/src/lib/generateRules.js @@ -153,7 +153,7 @@ function applyVariant(variant, matches, context) { // Retrieve "modifier" { let match = /(.*)\/(.*)$/g.exec(variant) - if (match) { + if (match && !context.variantMap.has(variant)) { variant = match[1] args.modifier = match[2] diff --git a/tests/variants.test.js b/tests/variants.test.js index 6490d9a461ad..8b864a61e0e9 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -1090,6 +1090,76 @@ test('variant functions returning arrays should output correct results when nest `) }) +test('variants with slashes in them work', () => { + let config = { + content: [ + { + raw: html`