CODEWITHSUNDEEP
reactjstypescripttailwind-cssheadless-uishopify-hydrogen
DanAbdn
DanAbdn

Reputation: 7495

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.

Upvotes: 1

Views: 531

Answers (1)

zzev
zzev

Reputation: 1

Like this:

import headlessuiPlugin from '@headlessui/tailwindcss'
    
export default {
  theme: {
    extend: {},
  },
  plugins: [headlessuiPlugin],
}

Upvotes: 0

Related Questions