Assignment of clamped values to CSS variables

[joshuafredrickson]

Great plugin! I'm looking to incorporate it more fully into my workflow, but a major blocker is not being able to use fluid values in a CSS variable as this plugin only works with @apply rules.

It would be great, for example, to do the following:

--font-size-xl: theme('fontSize.fluid.xl'); // not exactly, but something similar 

Or, is there a way to access the clamped values programmatically for use inside tailwind.config.js, where one could assign custom, fluid fontSizes that are accessible via the theme function?

[barvian]

Hi, I'm hoping to add something for this in the next major version of fluid-tailwind for Tailwind v4 👋

[joshuafredrickson]

That sounds amazing! I'm just starting to experiment with this in different projects, and I really like the implementation so far.

[aerni]

This would be a very welcomed addition!

I've run into this when I needed to add a clamp value to a CSS variable. I ended up adding ~pl-8/16 to my HTML to get the compiled result and copy-pasted it into my CSS file. Not a great solution.

First, I thought I might be able to use @apply to set the value, but that doesn't work.

--fluid-radius: @apply ~pl-8/16;

I imagine a custom function that exposes the fluid functionality. Something like this:

--fluid-radius: fluid('8/16');

[barvian]

Hi, here's a workaround I've used before. fluid-tailwind works with custom Tailwind plugins so you could add as many of these as you need:

// tailwind.config.js
import plugin from 'tailwindcss/plugin'

export default {
  // ...
  plugins: [
    fluid,
    plugin(({ matchUtilities, theme }) => {
      matchUtilities(
        {
          'fluid': (val) => ({
           '--fluid': val,
          }),
        },
        {
          values: theme('spacing'),
        }
      )
    })
}

<div class="rounded-[--fluid] ~fluid-8/16"></div>

Tailwind Play demo

Curious to hear your thoughts 👋

[aerni]

Oh, that's a really interesting approach. Likely a little too limiting, though. But I'm sure I can use it in some scenarios.