Adding HeroUI after creating a ReactJS application via Vite

Question

I'm following the instruction Here trying to make HeroUI works with React app created via Vite. However, it doesn't seem to be working!

Tailwind CSS on the other hand is working perfectly, app running with no errors, but HeroUI components are not applied!!

my vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss()
  ],
})

my tailwind.config.js:

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

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
        "./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}"
    ],
    theme: {
        extend: {},
    },
    darkMode: "class",
    plugins: [heroui()]
}

my main.jsx:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'

import {HeroUIProvider} from '@heroui/react'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    
    <HeroUIProvider>
      <App />
    </HeroUIProvider>
    
  </StrictMode>,
)

my index.css:

@import "tailwindcss";

and my App.jsx:

import {DateInput} from "@heroui/react";
import {CalendarDate} from "@internationalized/date";
import {Avatar} from "@heroui/react";

export default function App() {
  return (
    <>
      <div className="bg-blue-500 text-white p-4">
        <h1>Hello, Vite + React!</h1>
      </div>

      <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
        <DateInput
          className="max-w-sm"
          label={"Birth date"}
          placeholderValue={new CalendarDate(1995, 11, 6)} />
      </div>

      

    <div className="flex gap-3 items-center">
      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026024d" />
      <Avatar name="Junior" />
      <Avatar src="https://i.pravatar.cc/150?u=a042581f4e29026704d" />
      <Avatar name="Jane" />
      <Avatar src="https://i.pravatar.cc/150?u=a04258114e29026702d" />
      <Avatar name="Joe" />
    </div>

    </>    
  )
}

I've tried many different configurations but no use, I couldn't make the HeroUI components work so far. Any suggestion? did I miss something?

rozsazoltan · Accepted Answer · 2025-08-21 18:20:52Z

TL;DR: The question originally came up before official support was available. As of v2.8, HeroUI supports Tailwind CSS v4, and the documentation now correctly reflects how it works.

Update (2025-08-21) - recommended for HeroUI ^v2.8

Important: The update content assumes that you've successfully installed TailwindCSS v4 - not v3 with old settings. If you feel that's not the case, you'll need to decide whether to use the new Vite plugin, the PostCSS plugin, the CLI, or maybe the standalone version. Install TailwindCSS v4 accordingly:

If you've successfully installed v4, continue:

Get started HeroUI v2.8 with TailwindCSS v4

npm install @heroui/react@latest

Place this new hero.ts file wherever you like, then reference it relatively from your global CSS file.

./src/css/hero.ts

// hero.ts
import { heroui } from "@heroui/react";
// or import from theme package if you are using individual packages.
// import { heroui } from "@heroui/theme";
export default heroui();

This is just an example; in your project, your main CSS file might be located elsewhere and have a different name.

./src/css/global.css

@import "tailwindcss";

/* Note: Make sure the relative reference is correct */
/* I assumed when writing the response that they are in the same folder */
@plugin './hero.ts';
/* Note: You may need to change the path to fit your project structure */
@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));

After the merge of HeroUI PR #4656, support for TailwindCSS v4 became available with the release of the v2.8.0 stable/latest (non-beta) version on 2025-07-15.

Original (2025-02-28)

HeroUI does not currently officially support TailwindCSS v4.

TailwindCSS v4

Install the beta version of HeroUI for TailwindCSS v4 support.

HeroUI actively working on TailwindCSS v4 support - StackOverflow
HeroUI with TailwindCSS v4 - HeroUI Beta Docs
How to use TailwindCSS with Vite - HeroUI Docs
How to use TailwindCSS with PostCSS - HeroUI Docs

npm install @heroui/react@beta

hero.ts

import { heroui } from "@heroui/react";
export default heroui();

global.css

@import "tailwindcss";
@plugin './hero.ts';
/* Note: You may need to change the path to fit your project structure */
@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));

From TailwindCSS v4 onwards, using tailwind.config.js is insignificant, as CSS-first configuration is preferred. The content setting has been removed and replaced with automatic source detection. However, the legacy JS-based configuration can still be used via the @config directive.

TailwindCSS v4 is backwards compatible with v3 - StackOverflow
Using a JavaScript config file - TailwindCSS v4 Update Guide

TailwindCSS v4 has automatic source detection. This means it identifies which files need to be scanned and collects the class names you use from them. This automation ignores the paths specified in the .gitignore file. As a result, the entire /node_modules/ directory is most likely excluded.

Which files are scanned - TailwindCSS v4 Docs
Automatic Source Detection from TailwindCSS v4 - StackOverflow

This is not an issue. You have the option to manually add the HeroUI folder as a source like this:

@import "tailwindcss";
@source "../../node_modules/@heroui";

TailwindCSS v3 - use this until HeroUI v2.7

However, it is important to note that HeroUI has not yet published official installation steps for TailwindCSS v4 support.

Installation with TailwindCSS ^3.4 - HeroUI Docs
hero-inc/heroui #4644: TailwindCSS v4 support - GitHub

You can install TailwindCSS v3 using the following command and guide:

npm install tailwindcss@3

Get Started with TailwindCSS v3 & Vite - TailwindCSS v3 Docs

Collectives™ on Stack Overflow

Adding HeroUI after creating a ReactJS application via Vite

1 Answer 1

Update (2025-08-21) - recommended for HeroUI ^v2.8

Update (2025-07-15)

Original (2025-02-28)

TailwindCSS v4

TailwindCSS v3 - use this until HeroUI v2.7

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update (2025-08-21) - recommended for HeroUI ^v2.8

Update (2025-07-15)

Original (2025-02-28)

TailwindCSS v4

TailwindCSS v3 - use this until HeroUI v2.7

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related