Changes in writing plugins with TailwindCSS 4?

[anmoldovanov]

Thank you for releasing Tailwind CSS 4! You guys have done an amazing job 🔥

With the release of Tailwind CSS 4, have there been any changes to the way js plugins are written? In version 3, there was a dedicated page in the documentation for this topic, but I couldn't find a similar page for version 4.

Is It possible to create custom functions like --alpha()?

[wongjn]

@utility and @custom-variant declarations are the equivalents of the v3 plugin APIs now, written in CSS rather than JS. However, JS plugins are still available and can be included via the @plugin directive.

It's not really possible to create custom functions like --alpha() really. It wasn't really possible in v3 either.

[Tim-Wils]

I'm also looking for a @Custom-function functionality to go from v3 to v4. It's now holding us back to upgrade to the newest version.

For example looking for something like --fluid-clamp(18px,32px) where I want the function to transforms px to rems and create return a clamp() with the necessary logics in it.

Or is it possible in a different kind of way now?

[diegohaz]

How did you do this in v3?

[diegohaz]

I'd like to share my use case: I'm developing a Tailwind plugin that automatically adjusts colors to ensure sufficient contrast. Currently, we have utility classes that apply these adjusted colors to backgrounds, text, borders, shadows, and outlines. However, sometimes you just need the returned values for other properties, so having custom functions would be really nice.

[p0sera]

I have the same issue in V4, is there a way? In V3 it was possible in the tailwind.config.js:

function withOpacity(variableName) {
  return ({ opacityValue }) => {
    if (opacityValue !== undefined) {
      return `rgba(var(${variableName}), ${opacityValue})`;
    }
    return `rgb(var(${variableName}))`;
  };
}

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      colors: {
        folderBgColor: withOpacity("--color-folderBgColor")
      }
    }
  }
};

[p0sera]

Also this does not work in V4 with @config "../tailwind.config.js";