Functional utilites: Can't use --value() in media/container query

[mordechaim]

What version of Tailwind CSS are you using?

v4.1.18

What build tool (or framework if it abstracts the build tool) are you using?

Next.js App directory - Webpack

What version of Node.js are you using?

v25.0.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Reproduction URL

https://play.tailwindcss.com/FKD8ntInhO

Describe your issue

I was migrating a plugin form v3 to v4. I found the new functional utility system to be amazing and cover all the needed cases to migrate it.

The only issue I ran into was using --value() inside the query part of a @media or @container query; the value function is included verbatim in the build instead of inlining the value.
CSS mandates that it must be static so I can't just save it in a variable first.

---

Original JavaScript plugin

This plugin keeps a solo child centered inside a container, resizing the child to fit the container; while maintaining a fixed aspect ratio. It utilizes the aspect-ratio container query.

const plugin = require('tailwindcss/plugin')

module.exports = plugin(({ matchUtilities }) => {
    matchUtilities({
        'aspect-container': value => [
            {
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                width: '100%',
                height: '100%',
                maxWidth: '100%',
                maxHeight: '100%',
                container: 'aspect / size'
            },
            {
                '> *': {
                    aspectRatio: value,
                    width: '100%',
                    height: 'auto',
                    maxHeight: '100%'
                }
            },
            {
                [`@container aspect (aspect-ratio > ${value})`]: {
                    '> *': {
                        width: 'auto',
                        maxWidth: '100%',
                        height: '100%'
                    }
                }
            }
        ]
    }, {
        values: {
            '8.5x11': '8.5/11',
            '8.5x14': '8.5/14',
            '11x17': '11/17',
            'A3': '8.27/11.69',
            'A4': '8.27/11.69',
        }
    })
})

[wongjn]

Yea, --value() is only replaced in property values, not in at-rules, etc. You'd have to stick with a JavaScript plugin for now.

[RobinMalfait]

This is by design right now, moved it to an ideas discussion until we figure out a proper API for this.