How to use NextUI in RedwoodJS?

I followed the NextUI instructions, but Tailwind isn’t working in any of the components. How can I fix this?

Can you give us more information on your setup? Did you additionally follow the Redwood instructions for setting up tailwind? Command Line Interface | RedwoodJS Docs

Specifically, can you share:

  • your tailwind.config.js, and where it’s located in your project
  • your CSS file, and where it’s located in your project
  • your App.tsx, and how you’re importing that CSS file

Path : web/config/tailwind.config.js

my tailwind.config.js is

const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
  theme: {
    container: {
      screens: {
        lg: '1100px',
        xl: '1240px',
    fontFamily: {
      'heading': ['Josefin Sans'],
    extend: {},
  darkMode: "class",
  plugins: [nextui({
    prefix: "nextui", // prefix for themes variables
      addCommonColors: false, // override common colors (e.g. "blue", "green", "pink").
      defaultTheme: "dark", // default theme from the themes object
      defaultExtendTheme: "light", // default theme to extend on custom themes
      layout: {}, // common layout tokens (applied to all themes)
      themes: {
        "purple-dark": {
          extend: "dark", // <- inherit default values from dark theme
          colors: {
            background: "#0D0A17",
            foreground: "#ffffff",
            primary: {
              50: "#3B096C",
              100: "#520F83",
              200: "#7318A2",
              300: "#9823C2",
              400: "#c031e2",
              500: "#DD62ED",
              600: "#F182F6",
              700: "#FCADF9",
              800: "#FDD5F9",
              900: "#FEECFE",
              DEFAULT: "#7468E8",
              foreground: "#ffffff",
            focus: "#F182F6",
          layout: {
            disabledOpacity: "0.3",
            radius: {
              small: "4px",
              medium: "6px",
              large: "8px",
            borderWidth: {
              small: "1px",
              medium: "2px",
              large: "3px",

Path : index.css locate is web/src/index.css

 * `yarn rw setup ui tailwindcss` placed these directives here
 * to inject Tailwind's styles into your CSS.
 * For more information, see:

@import url(',wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url(',wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;


My App.jsx

import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
import { NextUIProvider } from "@nextui-org/react";

import FatalErrorPage from 'src/pages/FatalErrorPage'
import Routes from 'src/Routes'

import './scaffold.css'
import './index.css'
import './ibgth.scss'

const App = () => (
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
          <main className="purple-dark text-foreground bg-background">
            <Routes />

export default App

I can use tailwindcss without any problems, but when I use the nextui class component that belongs to tailwind, it doesn’t get rendered at all.

Have you tried using relative paths in the Tailwind config? Most likely problem is that it’s not picking up the CSS

I was use command like this

yarn workspace web add @nextui-org/react framer-motion

instruction from nextui

// tailwind.config.js
const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
  theme: {
    extend: {},
  darkMode: "class",
  plugins: [nextui()],

but I don’t know to use path in redwood,


what should be like ?

maybe something like …/…/node_modules so that it’s actually pointing at that file (gotta go up to web and then to root)

give that a try

I’ve tried it but it’s still the same. :smiling_face_with_tear:

Let’s do some more debugging. When using a NextUI component, are you seeing it show up in the DOM? If so, are you able to see what Tailwind classes it’s trying to use? If not, the problem is elsewhere

in my Header Component

import { Link, routes } from '@redwoodjs/router'
import React, { useEffect } from "react"
import Logo from '../Logo/Logo'

import {
} from "@nextui-org/react"

const Header = ({classPage}) => {
  const [isMenuOpen, setIsMenuOpen] = React.useState(false)
  const [isTransparent, setIsTransparent] = React.useState(true)

  useEffect(() => {
    // Function to handle scroll event
    const handleScroll = () => {
      const scrollPosition = window.scrollY;
      if (scrollPosition >= 0 && scrollPosition <= 50) {
      } else {

    // Attach the scroll event listener when the component mounts
    window.addEventListener('scroll', handleScroll)

    // Clean up the event listener when the component unmounts
    return () => {
      window.removeEventListener('scroll', handleScroll)
  }, [])

  const menuItems = [
    "My Settings",
    "Team Settings",
    "Help & Feedback",
    "Log Out",

  return (
    <Navbar onMenuOpenChange={setIsMenuOpen}>
          aria-label={isMenuOpen ? "Close menu" : "Open menu"}
          <Link to={routes.home()} className="font-bold text-inherit">
            <Logo />

      <NavbarContent className="hidden sm:flex gap-4" justify="center">
          <Link to={routes.about()} color="foreground">About</Link>
      <NavbarContent justify="end">
        <NavbarItem className="hidden lg:flex">
          <Link href="#">Login</Link>
          <Button as={Link} color="primary" href="#" variant="flat">
            Sign Up
        {, index) => (
          <NavbarMenuItem key={`${item}-${index}`}>
                index === 2 ? "primary" : index === menuItems.length - 1 ? "danger" : "foreground"

export default Header

In my DOM loading element and class but some class without using in web it’s not loading

Okay, so it’s generating the correct HTML, just not the classes. I’ve never tried this, but give it a shot: How to generate all classes in Tailwind CSS

I’m guessing that you need to figure out what the correct content path is.

I can do it, just change the path from the NextUI instructions

// tailwind.config.js
const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...

to this path and add important: true

// tailwind.config.js
const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: [

Thank you very much @arimendelow for your support and suggestion. Thank you for your time.

1 Like