EN VI

Reactjs - React with Tailwind with HeadlessUI - how to add plugin configuration?

2024-03-10 00:30:04
Reactjs - React with Tailwind with HeadlessUI - how to add plugin configuration

I've a react app using Tailwind with some Headless UI tabs.
I'm trying to style the tabs when active but in order to do that I had to include a new package. Namely @headlessui/tailwindcss found here.

This is the example they document...

// tailwind.config.js
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [
    require('@headlessui/tailwindcss')

    // Or with a custom prefix:
    require('@headlessui/tailwindcss')({ prefix: 'ui' })
  ],
}

However, I don't use requires in my project (modules, ES2022)... I use imports. This is what my plugins section looks like at the moment...

import formsPlugin from "@tailwindcss/forms";
import typographyPlugin from "@tailwindcss/typography";

// ...then inside the config...

plugins: [formsPlugin, typographyPlugin]

How do I add "@headlessui/tailwindcss" into the plugins using an import approach?

Any ideas?

Thanks, Dan.

Solution:

Destructuring assignment and importing the plugin directly.

import formsPlugin from "@tailwindcss/forms";
import typographyPlugin from "@tailwindcss/typography";
import headlessUITailwindCSSPlugin from "@headlessui/tailwindcss";

// ...then inside the config...

plugins: [formsPlugin, typographyPlugin, headlessUITailwindCSSPlugin()]
Answer

Login


Forgot Your Password?

Create Account


Lost your password? Please enter your email address. You will receive a link to create a new password.

Reset Password

Back to login