Migration to Tailwind v4?

[SapphicMoe]

I just saw this tweet by Adam Wathan about the early Tailwind v4 alpha:
https://twitter.com/adamwathan/status/1764383146559017048

In it, it's mentioned that the Tailwind config file (tailwind.config.mjs) is no longer necessary.

How will this affect the Catppuccin plugin?

[uncenter]

https://x.com/adamwathan/status/1764393609246261496:

Plugins and presets will be CSS imports if all goes according to plan 👍

The new "CSS configuration" looks remarkably easy to use so I imagine it won't be too difficult to convert it to that. I'm sure they'll have good documentation on migrating plugins as well.

[nekowinston]

Can't say until they've figured how they want to go about it.
https://twitter.com/adamwathan/status/1764384186478067728

Seems like everything will be CSS based, I assume that there'll be some magic to translate {...config} into CSS directives... we'll see.
I won't offer support for prereleases in any case.

[Master-Hash]

Tailwind v4 beta is out with migration docs. Now the plugin's theme variable works, but custom classes are broken. Any idea to adapt the new version?

[brianseidman]

So far the following seems to work in a Tailwind v4 CSS file:

@import "tailwindcss";

@plugin "@catppuccin/tailwindcss"; 

@theme inline {
    --color-ctp-rosewater: rgba(var(--ctp-rosewater));
    --color-ctp-flamingo: rgba(var(--ctp-flamingo));
    --color-ctp-pink: rgba(var(--ctp-pink));
    --color-ctp-mauve: rgba(var(--ctp-mauve));
    --color-ctp-red: rgba(var(--ctp-red));
    --color-ctp-maroon: rgba(var(--ctp-maroon));
    --color-ctp-peach: rgba(var(--ctp-peach));
    --color-ctp-yellow: rgba(var(--ctp-yellow));
    --color-ctp-green: rgba(var(--ctp-green));
    --color-ctp-teal: rgba(var(--ctp-teal));
    --color-ctp-sky: rgba(var(--ctp-sky));
    --color-ctp-sapphire: rgba(var(--ctp-sapphire));
    --color-ctp-blue: rgba(var(--ctp-blue));
    --color-ctp-lavender: rgba(var(--ctp-lavender));
    --color-ctp-text: rgba(var(--ctp-text));
    --color-ctp-subtext1: rgba(var(--ctp-subtext1));
    --color-ctp-subtext0: rgba(var(--ctp-subtext0));
    --color-ctp-overlay2: rgba(var(--ctp-overlay2));
    --color-ctp-overlay1: rgba(var(--ctp-overlay1));
    --color-ctp-overlay0: rgba(var(--ctp-overlay0));
    --color-ctp-surface2: rgba(var(--ctp-surface2));
    --color-ctp-surface1: rgba(var(--ctp-surface1));
    --color-ctp-surface0: rgba(var(--ctp-surface0));
    --color-ctp-base: rgba(var(--ctp-base));
    --color-ctp-mantle: rgba(var(--ctp-mantle));
    --color-ctp-crust: rgba(var(--ctp-crust));
}

I recognize it's basically reassigning all the color variables a second time, but it seems to make the classes work and it is responsive to changing the class between the various Catppuccin flavors.

[uncenter]

Tailwind doesn't even provide proper/complete documentation on plugins and themes yet, so I'd be patient until v4 fully releases before we can look into upgrading.

[seangenabe]

Tailwind v4 has been released. https://tailwindcss.com/blog/tailwindcss-v4

[sgoudham]

Hoping to take a stab at this, soon™