Tailwind v4 Compatibility?

[rj-elias]

Is this plugin compatible with Tailwindcss v4?

https://fluid.tw/#installation

Since v4 use rem by default for breakpoints and font size I guess point 3 is no more relevant. But how can I add the extractor in tailwind css v4 since it doesn't use tailwind.config.js anymore.

[barvian]

Hi, it will very likely need a rewrite for Tailwind v4 but I don't want to start working on it until the plugin API is finalized/documented 😶.

[daphen]

Pretty weird that v4 doesn't have clamp support out of the box to be honest. Have you asked Adam about this?

[barvian]

Pretty weird that v4 doesn't have clamp support out of the box to be honest. Have you asked Adam about this?

@daphen I have not but if you can get a hold of him I'd be curious to hear his thoughts! I'd imagine it'd be a pretty big lift so I'm not expecting a surprise announcement on that front but who knows 😅

[deinternetarchitect]

Is there any update on the progress of this, when will it work with tailwind v4?

[barvian]

Hi, no update but I'm planning to look into this over the next few weekends 👍

[abeerance]

You actually won't need this library anymore, since tailwind will be using the @theme directive. You can just use something like this:

@theme { --text-2xs: clamp(0.25rem, 0.162rem + 0.3756vw, 0.5rem); --text-xs: clamp(0.5rem, 0.412rem + 0.3756vw, 0.75rem); --text-s: clamp(0.75rem, 0.662rem + 0.3756vw, 1rem); --text-m: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem); --text-l: clamp(1.5rem, 1.1479rem + 1.5023vw, 2.5rem); --text-xl: clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem); --text-2xl: clamp(3rem, 2.2958rem + 3.0047vw, 5rem); --text-3xl: clamp(4.0625rem, 2.8521rem + 5.1643vw, 7.5rem); }

And it will work out of the box. You can just overwrite every possible thing such as padding directly.

[barvian]

You actually won't need this library anymore, since tailwind will be using the @theme directive. You can just use something like this:

@theme { --text-2xs: clamp(0.25rem, 0.162rem + 0.3756vw, 0.5rem); --text-xs: clamp(0.5rem, 0.412rem + 0.3756vw, 0.75rem); --text-s: clamp(0.75rem, 0.662rem + 0.3756vw, 1rem); --text-m: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem); --text-l: clamp(1.5rem, 1.1479rem + 1.5023vw, 2.5rem); --text-xl: clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem); --text-2xl: clamp(3rem, 2.2958rem + 3.0047vw, 5rem); --text-3xl: clamp(4.0625rem, 2.8521rem + 5.1643vw, 7.5rem); }

And it will work out of the box. You can just overwrite every possible thing such as padding directly.

Hi, you could already do this in Tailwind v3 and it works well. The goal of this plugin is to let you generate these values on-the-fly in any utility using your existing theme values 👍

[abeerance]

You actually won't need this library anymore, since tailwind will be using the @theme directive. You can just use something like this: @theme { --text-2xs: clamp(0.25rem, 0.162rem + 0.3756vw, 0.5rem); --text-xs: clamp(0.5rem, 0.412rem + 0.3756vw, 0.75rem); --text-s: clamp(0.75rem, 0.662rem + 0.3756vw, 1rem); --text-m: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem); --text-l: clamp(1.5rem, 1.1479rem + 1.5023vw, 2.5rem); --text-xl: clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem); --text-2xl: clamp(3rem, 2.2958rem + 3.0047vw, 5rem); --text-3xl: clamp(4.0625rem, 2.8521rem + 5.1643vw, 7.5rem); } And it will work out of the box. You can just overwrite every possible thing such as padding directly.

Hi, you could already do this in Tailwind v3 and it works well. The goal of this plugin is to let you generate these values on-the-fly in any utility using your existing theme values 👍

Ah sweet didn't know that, excited what you come up with then :)

[Amiejah]

while the @theme solution is nice! Are you still planning to update this package though? I really like the way we can "tailwindify" our projects by using the class & utilities.

[barvian]

while the @theme solution is nice! Are you still planning to update this package though? I really like the way we can "tailwindify" our projects by using the class & utilities.

Hi, I'm still planning on it yes. Tailwind v4 doesn't have an upgrade guide for third-party plugins, or any official API for third-party plugins in general, so there's a bit more guesswork than I would've hoped. v4 also silently dropped support for custom extractors, so it will definitely require a complete rewrite.

[joffreypersia]

Thank you for your work @barvian Glad to see that it is planned

[kjwessa]

Appreciate all you're doing @barvian and am also pumped to know you're still planning work on this.

[stijns96]

Was this what you were waiting for? https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.9

Make JS APIs available to plugins and configs in the Standalone CLI

[nbbaier]

Also really interested in the migration to v4! Has anyone tried it with the @plugin directive?

[maartenjongerius-enfold]

I'm very interested in seeing an implementation for v4, especially because @container queries are supported and would like to see this library also support those for even more flexibility. Is this something your considering @barvian ?

[barvian]

I'm very interested in seeing an implementation for v4, especially because @container queries are supported and would like to see this library also support those for even more flexibility. Is this something your considering @barvian ?

Hi @maartenjongerius-enfold 👋, yes I'm planning container query support. The current plugin supports them too: https://fluid.tw/#container-queries

[timvandaatselaar]

@barvian I’m really excited about this plugin! Do you have any idea when Tailwind 4.0 support will be released?

[barvian]

@timvandaatselaar Hi, unfortunately not as I'm quite busy with work at the moment. It'll be at least a month I'd imagine 😬

[lqze]

@timvandaatselaar Hi, unfortunately not as I'm quite busy with work at the moment. It'll be at least a month I'd imagine 😬

@barvian Are you to open to outsider help?

[michaelbrusegard]

As a stop gap solution I made this simple plugin that generates all the CSS classes. Of course there are some drawbacks and the API is not as clean, but maybe it can be useful for some of you

[mercury7design]

Eagerly waiting for the upgrade to v4, this is one of the best tailwind plugins

Your fans are cheering you on @barvian

[stijns96]

To be honest, I don't think they will drop support for the @plugin at-rule anytime soon. There are to many plugins that can not simply be build with native css and the new at-rules they supplied.

I also can't really find other issue comments or docs that is in development where they even talk about some soort of JS plugin solution.

[stijns96]

To be honest, I don't think they will drop support for the @plugin at-rule anytime soon. There are to many plugins that can not simply be build with native css and the new at-rules they supplied.

I also can't really find other issue comments or docs that is in development where they even talk about some soort of JS plugin solution.

@barvian see #17460

[gustaveWPM]

Also interested!

[spaceballstheuser]

How have I only just discovered this plugin?! Just wanted to add another +1 to your pool of on-cheerers for a TW4 update 👏

[rongshabing]

+1! interested in the v4 update! :) 💪

[RyanRoberts]

I tried living without the plugin and life is just not the same, it's so painful not having nice fluid sizing 😭

(I may be over-egging that a bit but it's true)

[deinternetarchitect]

Same for me. Life with the plugin is so much better 😄

[nicolas-cusan]

I made a similar plugin before learning about fluid.tw: https://github.com/nicolas-cusan/tailwind-clamp It works a little different, leveraging the arbitrary CSS syntax: clamp-[...].

I recently updated it to work with Tailwind v4, so l leave it here in case it helps anyone.

[vehktaur1840]

I made a similar plugin before learning about fluid.tw: https://github.com/nicolas-cusan/tailwind-clamp It works a little different, leveraging the arbitrary CSS syntax: clamp-[...].

I recently updated it to work with Tailwind v4, so l leave it here in case it helps anyone.

thank you so much for this