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

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

[ujjaldey]

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

Thanks! It worked!

[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";

[abodnar-tis-tech]

@obouchari @amantiwari8861 Did you successfully install the RippleUI plugin? I tried to use it, but when starting my app I received the following error:

⨯ ./src/styles/globals.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/styles/globals.css
Error: `addUtilities({ '@supports (-moz-appearance:none)' : … })` defines an invalid utility selector. Utilities must be a single class name and start with a lowercase letter, eg. `.scrollbar-none`

Also my previous tw config:

module.exports = {
 plugins: [require("rippleui"), require("tailwindcss-animate")],
  /** @type {import('rippleui').Config} */
  rippleui: {
    removeThemes: ["dark"],
  },
}

Please share your experience with this.

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

[katerlouis]

I've been searching for half an hour now already and am baffled that no one has asked that before. @zenovak have you found a solution? I'm really confused that programmatic variant generation does not seem to be a thing anymore. I have build a system with rather complex custom plugins over the years and while technically possible, it would be a gigantic pain to "write out" the hundreds of utilities using @plugin inside a css file oO

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

[rasulovdev]

In v4 docs, @plugin directive is described under "Compatibility" section, which states "The following directives and functions exist solely for compatibility with Tailwind CSS v3.x.". Moreover, @plugin directive description says "Use the @plugin directive to load a legacy JavaScript-based plugin".
That is leading me toward the same question OP has: does that all mean there's a "modern" way of composing plugins?

[eloyesp]

As all the configuration is done within css files, and @import is a native feature on tailwind 4.

So a modern plugin is a plugin.css file and to use it just @import "plugin.css".

[kpietraszko]

The "modern" way of creating plugins (or rather utilities) is documented here: https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities

If you want a more complete example, I posted one here: #5541 (comment)