[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.

[fokkerone]

aha, mouth full of promises.
the only way is this hacky @config + @plugin in css directive.. doesnt work with ts and there are alot of plugins / presets that wont work anymore like each thats using breakpoints i.e.

how often does tw now changed the color type??? 3, 4 times?
no token workflow from figma - json - to reflect all this changes.

I am a bit upset because we need to change presets, themes, a ll color tokens ... literally the comple token workflow in style dictionary...

alot of work for same-same but different

[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. 👍

[SantaClaas]

I was wondering the same but for my plugin calls a function to configure the returned plugin function. Thanks

[HarshArora-1205]

@plugin 'tailwindcss-animate';
@plugin '@tailwindcss/forms';
@plugin '@tailwindcss/typography';

When I include plugins, I receive a warning: Unknown at rule @plugin css(unknownAtRules)

But I am able to use them.
tailwind version - 4.0.3.

[wongjn]

You can install and set up the Tailwind Intellisense plugin if you want to get rid of the warnings in VSCode.

[HarshArora-1205]

You can install and set up the Tailwind Intellisense plugin if you want to get rid of the warnings in VSCode.

I already have intellisense installed, still I receive those warnings.

[Stephan-MC]

you'll need to disable css linting in your vs code.

this error is shown because the built in css lsp in your vs code doesn't recognize @plugin as a valid css at-rule.

[agoodkind]

you'll need to disable css linting in your vs code.

this error is shown because the built in css lsp in your vs code doesn't recognize @plugin as a valid css at-rule.

But what if CSS linting is desired?

[maribox]

You need to select "Tailwind CSS" on the bottom right in VS Code (when the Tailwind CSS IntelliSense extension is installed)

[amantiwari8861]

how to install rippleui(https://www.ripple-ui.com/docs/get-started/installation) plugin in tailwind 4.0

[obouchari]

Same as above:

@plugin "rippleui";

[zenovak]

Hello Everyone, what about custom plugins that declare a new variant? Im trying to update the following code:

module.exports = {
 plugins: [
    plugin(function({ addVariant }) {
      addVariant('slider-thumb', ['&::-webkit-slider-thumb', '&::slider-thumb', '&::-moz-range-thumb']);
      addVariant('slider-track', ['&::-webkit-slider-runnable-track', '&::-moz-range-track']);
    }),
  ],
}

How do we do this in v4.0? Thanks.

[tecoad]

@adamwathan i found this createPlugin and exported legacy types, but cannot find how plugins can be created on v4 anymore.

The syntax i was adopting on v3 was:

plugin((api: PluginAPI) => {
			const { addUtilities } = api

			const lineCounts = [1, 2, 3] // Define the number of grid lines you need
			const lineStyles = ['solid', 'dashed'] // Define the line styles

Could you shed some light on the issue? Will this never work in v4 or is implementation different?
Due to this seems i can not just migrate yet.

[SantaClaas]

I'm not sure what you exactly mean.
If it is the plugin function you are looking for then it can be imported from tailwindcss/plugin in v4.
As for the types. They seem to be not exported right now but a PR to fix it seems to be already merged. See #16505 (comment) so probably in the next version.
Hope that helps.