How to use tailwind v4 with Hero UI

[chirag0055]

I installed tailwind v4 but it didn't create tailwind.config.jx file and also 'npx tailwindcss init-p' is also not working

[wongjn]

The init command no longer exists in v4. Consider checking the installation documentation that is most relevant to your project to integrate Tailwind v4.

[chirag0055]

I installed the tailwind v4, now I have to use Hero UI but its plugin is to be written in "tailwind.config.js" which is not available

[wongjn]

You can include a legacy tailwind.config.js via the @config directive.

[leetcow]

that doesn't work: error: addUtilities({ ':root' : … })defines an invalid utility selector. Utilities must be a single class name and start with a lowercase letter, eg..scrollbar-none.

[abhishekml121]

@leetcow I also upgraded to tailwindcss4 and added 3 lines at the top of the global.css file:
@import 'tailwindcss'; @source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'; @custom-variant dark (&:is(.dark *));

This the current view : https://streamable.com/naexgk
As you can see in the shared video (above link), button styles (bg-color, border-radius etc) are NOT working.

I removed the @config for tailwind.config.js from global.css file because it started to giving me the same error which you got.

[admin-wavedropper]

that doesn't work: error: addUtilities({ ':root' : … })defines an invalid utility selector. Utilities must be a single class name and start with a lowercase letter, eg..scrollbar-none.

I was having the same issues. The fix was to create a custom plugin wrapper that intercepts when HeroUI tries to add :root selectors as utilities (which Tailwind v4 doesn't allow anymore):

//custom-heroui-plugin.js

import { heroui } from "@heroui/theme";

export function customHeroui() {

  return (tailwindConfig) => {

    const heroPlugin = heroui();
    
    return (api) => {
      const originalAddUtilities = api.addUtilities;
      
      // Fix the :root selector issue
      api.addUtilities = (utilities, options) => {
        const rootStuff = {};
        const normalStuff = {};
        
        Object.entries(utilities).forEach(([key, value]) => {
          if (key === ':root' || key.startsWith(':root')) {
            rootStuff[key] = value;
          } else {
            normalStuff[key] = value;
          }
        });
        
        if (Object.keys(rootStuff).length > 0) {
          api.addBase(rootStuff); // Use addBase instead for :root
        }
        
        if (Object.keys(normalStuff).length > 0) {
          originalAddUtilities(normalStuff, options);
        }
      };
      
      return heroPlugin(api);
    };
  };
}

Then just used this custom wrapper in tailwind config:

import { customHeroui } from "./custom-heroui-plugin";

export default {
  // your other config...
  plugins: [customHeroui()],
};

[rozsazoltan]

• Problem installing TailwindCSS with Vite, after "npx tailwindcss init -p" command - StackOverflow

[abdul99ahad]

HeroUI does not yet support Tailwind CSS v4 yet. (Reference: GitHub Issue)

[amirhd-com]

when HeroUI support tailwindcss v4?!

[rozsazoltan]

I think you should ask them instead. Based on the PR, active development is underway to ensure compatibility, so it will likely be available soon.

• [Feature Request]Tailwind v4 support. heroui-inc/heroui#4644
• feat: support tailwindcss v4 heroui-inc/heroui#4656 - active PR from Jan 26