reactjsnext.jstailwind-cssvitetailwind-css-4

Adding HeroUI after creating a ReactJS application via Vite

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?

Solution

  • TLDR: HeroUI does not currently officially support TailwindCSS v4.

    TailwindCSS v4

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

    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 (recommended until official v4 support isn't available)

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

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

    npm install tailwindcss@3