[v4] How to add plugins?

[ev3rlost]

How do you add the official plugins with no config file in v4?

[ev3rlost]

My bad, I've missed the note saying it isn't available yet in v4 in the roadmap section. I hope this gets added soon!

Plugins and custom utilities — we don’t have support for plugins, or for writing custom utilities that automatically work with variants yet. Obviously we will make this work before a stable release.

[ev3rlost]

Just a bump post. How's it looking at the plugin department? :) Any news?

[adamwathan]

Right now we're working on a few new components for Catalyst and releasing Headless UI v2.0 but we'll be back into Tailwind CSS v4 stuff next month and this is one of the top priorities 👍 So expect to see some movement here soon!

[ev3rlost]

Go Adam! Thank you for answering! So pumped for v4! :))

[eliabexp]

Just a bump post. How's it looking at the plugin department? :) Any news?

[eloyesp]

Reading the CHANGELOG it seems that plugins will be added using a new css directive @plugin.

[ev3rlost]

Looking at the CHANGELOG, I'm guessing the @plugin directive has been implemented since 4.0.0-alpha.18?

Does the tailwindcss/forms plugin work yet?

How do we implement it? I tried @plugin "tailwindcss/forms"; but I get [vite] Internal server error: [postcss] Package subpath './forms' is not defined by "exports".

Currently on [4.0.0-alpha.20].

[adamwathan]

Should be “@tailwindcss/forms” 👍🏻 don’t forget the “@“ sign!

[ev3rlost]

Thank you Adam!

The thing is: I can't npm install the @tailwindcss/forms plugin using the 4.0.0.-alpha.20 release.

I get the following errors:

code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
While resolving: undefined@undefined
npm error Found: [email protected]
npm error node_modules/tailwindcss
npm error   tailwindcss@"^4.0.0-alpha.20" from the root project
npm error
npm error Could not resolve dependency:
npm error peer tailwindcss@">=3.0.0 || >= 3.0.0-alpha.1" from @tailwindcss/[email protected]
npm error node_modules/@tailwindcss/forms
npm error   dev @tailwindcss/forms@"*" from the root project
Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

Am I doing something wrong here?

[kaysef]

I may be missing this in the changelog somewhere but wondering how to use the plugins with the new @plugins directive in v4 and in which file to add these imports. Any example?

Is it still in tailwind.config.js or with v4, that's going away and the plugins are getting added in the .css file.

[ev3rlost]

Everything resides in the app.css file.

app.css:

@import 'tailwindcss';
@plugin '@tailwindcss/forms'; (given you installed the plugin via npm)

@theme {
  --color-primary-500: #f8fafc;
}

The problem is you can't install the form plugin as it gives you the above errors.

[philipp-spiess]

@ev3rlost You can try to install it with --force (which ignores the upstream version conflict):

npm install @tailwindcss/forms --force

We'll get the peer dependency version fixed though, thanks!

[ev3rlost]

Thank you philipp! Adding the --force flag worked! Glad to see it being fixed.

[Stephan-MC]

What about packages with multiple plugin functions that I may need to use only one of them.

[philipp-spiess]

For now you have to create a custom .js file that imports the package and only has one default export, so something like this should work:

/* my-plugin-x.js */
import { PluginX } from 'my-tailwind-plugins';

export default PluginX;

/* root.css */
@plugin './my-plugin-x.js';

[Stephan-MC]

ok thanks. but might become tedious if i have multiple plugins to work with. 👍