[v4] matchVariant - Tailwind not picking up classNames with a modifier

[kieranm]

Hello all (cc @philipp-spiess as the one who just implemented this in V4)

I am migrating a plugin that we use for container queries from V3 to V4 and having some trouble. Tailwind does not seem to be picking up any classNames that have a modifier on them.

This worked in V3 and doesn't in V4 so I'm not sure if this is a bug or not.

Working className

container-min-w-[250px]:flex-row

CSS Output:

.container-min-w-\[250px\]\:flex-row {
    @container  (min-width: 250px) {
      flex-direction: row;
    }
  }

Failing className

container-min-w-[128px]/placement:block

There is no CSS output for this className

Expected output:

.container-min-w-\[128px\]\:block {
  @container placement (min-width: 128px) {
    display: block;
  }
}

Plugin Code
This plugin is based on tailwind-container-queries but extends it for use with heights as well as widths

import plugin from "tailwindcss/plugin"

type PluginAPI = Parameters<Parameters<typeof plugin>[0]>[0]

export default plugin(function containerQueries({
  matchUtilities,
  matchVariant,
  theme,
}: {
  matchUtilities: PluginAPI["matchUtilities"]
  matchVariant: PluginAPI["matchVariant"]
  theme: PluginAPI["theme"]
}) {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  const values: Record<string, string> = theme("containers") ?? {}

  function parseValue(value: string) {
    const numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null
    if (numericValue === null) return null

    return parseFloat(value)
  }

  const cbFor =
    (selector: string) =>
    (value = "", extra: { modifier: string | null }) => {
      const parsed = parseValue(value)

      return parsed !== null
        ? `@container ${extra.modifier ?? ""} (${selector}: ${value})`
        : []
    }

  const options = {
    values,
    sort(
      aVariant: { value: string; modifier: string | null },
      zVariant: { value: string; modifier: string | null },
    ) {
      const a = parseFloat(aVariant.value)
      const z = parseFloat(zVariant.value)

      if (a === null || z === null) return 0

      // Sort values themselves regardless of unit
      if (a - z !== 0) return a - z

      const aLabel = aVariant.modifier ?? ""
      const zLabel = zVariant.modifier ?? ""

      // Explicitly move empty labels to the end
      if (aLabel === "" && zLabel !== "") {
        return 1
      } else if (aLabel !== "" && zLabel === "") {
        return -1
      }

      // Sort labels alphabetically in the English locale
      // We are intentionally overriding the locale because we do not want the sort to
      // be affected by the machine's locale (be it a developer or CI environment)
      return aLabel.localeCompare(zLabel, "en", { numeric: true })
    },
  }

  matchUtilities(
    {
      "container-query": (value, { modifier }) => {
        return {
          "container-type": value,
          "container-name": modifier ?? "",
        }
      },
    },
    {
      values: {
        DEFAULT: "size",
        "inline-size": "inline-size",
        normal: "normal",
      },
      modifiers: "any",
    },
  )

  matchVariant<string>("@", cbFor("min-width"), options)
  matchVariant<string>("container-min-w", cbFor("min-width"), options)
  matchVariant<string>("container-max-w", cbFor("max-width"), options)
  matchVariant<string>("container-min-h", cbFor("min-height"), options)
  matchVariant<string>("container-max-h", cbFor("max-height"), options)
})

Thanks
Kieran

[philipp-spiess]

@kieranm Thanks for the report! This was indeed an oversight on our end. I put up a PR to fix it here: #14637. Once it's merged it will be in the next patch release.