Consider variants starting with @- to be invalid (e.g. @-2xl:flex) (#18869)

This PR fixes a small parsing issue where variants such as `@-2xl:flex`
would parse, but were handled as-if they were `@2xl:flex` instead.

Noticed this while working on: #18867 

This is because when we parse normal variants like `data-foo` then we
want to have a `data` root and a `foo` value, not a `-foo` value.

If you are now using `@-2xl:flex`, then no CSS will be generated for
this anymore. If you were relying on this for some reason, you should
use `@2xl:flex` instead.

## Test plan

Before:

<img width="862" height="586" alt="image"
src="https://github.com/user-attachments/assets/b5993ca6-f907-49af-b5bd-b7206c8300e1"
/>

After:

<img width="862" height="586" alt="image"
src="https://github.com/user-attachments/assets/351f45e4-4cd3-451c-ae2a-c52c3e770629"
/>

---------

Co-authored-by: Jordan Pittman <thecrypticace@gmail.com>

CHANGELOG.md

@@ -20,10 +20,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Show suggestions for known `matchVariant` values ([#18798](https://github.com/tailwindlabs/tailwindcss/pull/18798))
 - Replace deprecated `clip` with `clip-path` in `sr-only` ([#18769](https://github.com/tailwindlabs/tailwindcss/pull/18769))
 - Hide internal fields from completions in `matchUtilities` ([#18820](https://github.com/tailwindlabs/tailwindcss/pull/18820))
+- Ignore `.vercel` folders by default (can be overridden by `@source …` rules) ([#18855](https://github.com/tailwindlabs/tailwindcss/pull/18855))
+- Consider variants starting with `@-` to be invalid (e.g. `@-2xl:flex`) ([#18869](https://github.com/tailwindlabs/tailwindcss/pull/18869))
 - Upgrade: Migrate `aria` theme keys to `@custom-variant` ([#18815](https://github.com/tailwindlabs/tailwindcss/pull/18815))
 - Upgrade: Migrate `data` theme keys to `@custom-variant` ([#18816](https://github.com/tailwindlabs/tailwindcss/pull/18816))
 - Upgrade: Migrate `supports` theme keys to `@custom-variant` ([#18817](https://github.com/tailwindlabs/tailwindcss/pull/18817))
-- Ignore `.vercel` folders by default (can be overridden by `@source …` rules) ([#18855](https://github.com/tailwindlabs/tailwindcss/pull/18855))
 
 ## [4.1.12] - 2025-08-13
 

packages/tailwindcss/src/candidate.ts

@@ -773,6 +773,11 @@ function* findRoots(input: string, exists: (input: string) => boolean): Iterable
       // can skip any further parsing.
       if (root[1] === '') break
 
+      // Edge case: `@-…` is not valid as a variant or a utility so we want to
+      // skip if an `@` is followed by a `-`. Otherwise `@-2xl:flex` and
+      // `@-2xl:flex` would be considered the same.
+      if (root[0] === '@' && exists('@') && input[idx] === '-') break
+
       yield root
     }
 

packages/tailwindcss/src/variants.test.ts

@@ -2198,6 +2198,39 @@ test('container queries', async () => {
       }
     }"
   `)
+  expect(
+    await compileCss(
+      css`
+        @theme {
+          --container-lg: 1024px;
+          --container-foo-bar: 1440px;
+        }
+        @tailwind utilities;
+      `,
+      [
+        '@-lg:flex',
+        '@-lg/name:flex',
+        '@-[123px]:flex',
+        '@-[456px]/name:flex',
+        '@-foo-bar:flex',
+        '@-foo-bar/name:flex',
+
+        '@-min-lg:flex',
+        '@-min-lg/name:flex',
+        '@-min-[123px]:flex',
+        '@-min-[456px]/name:flex',
+        '@-min-foo-bar:flex',
+        '@-min-foo-bar/name:flex',
+
+        '@-max-lg:flex',
+        '@-max-lg/name:flex',
+        '@-max-[123px]:flex',
+        '@-max-[456px]/name:flex',
+        '@-max-foo-bar:flex',
+        '@-max-foo-bar/name:flex',
+      ],
+    ),
+  ).toEqual('')
 })
 
 test('variant order', async () => {