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: [
'src/**/*.{js,jsx,ts,tsx,html}',
'node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
],
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
/**
* START --- SETUP TAILWINDCSS EDIT
*
* `yarn rw setup ui tailwindcss` placed these directives here
* to inject Tailwind's styles into your CSS.
* For more information, see: https://tailwindcss.com/docs/installation
*/
@import url('https://fonts.googleapis.com/css2?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');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,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;
/**
* END --- SETUP TAILWINDCSS EDIT
*/
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">
<NextUIProvider>
<RedwoodApolloProvider>
<main className="purple-dark text-foreground bg-background">
<Routes />
</main>
</RedwoodApolloProvider>
</NextUIProvider>
</RedwoodProvider>
</FatalErrorBoundary>
)
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: [
// ...
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [nextui()],
};
but I don’t know to use path in redwood,
./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}
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. 
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 {
Navbar,
NavbarBrand,
NavbarContent,
NavbarItem,
NavbarMenuToggle,
NavbarMenu,
NavbarMenuItem,
Button
} 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) {
setIsTransparent(true)
} else {
setIsTransparent(false)
}
}
// 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 = [
"Profile",
"Dashboard",
"Activity",
"Analytics",
"System",
"Deployments",
"My Settings",
"Team Settings",
"Help & Feedback",
"Log Out",
];
return (
<Navbar onMenuOpenChange={setIsMenuOpen}>
<NavbarContent>
<NavbarMenuToggle
aria-label={isMenuOpen ? "Close menu" : "Open menu"}
className="sm:hidden"
/>
<NavbarBrand>
<Link to={routes.home()} className="font-bold text-inherit">
<Logo />
</Link>
</NavbarBrand>
</NavbarContent>
<NavbarContent className="hidden sm:flex gap-4" justify="center">
<NavbarItem>
<Link to={routes.about()} color="foreground">About</Link>
</NavbarItem>
</NavbarContent>
<NavbarContent justify="end">
<NavbarItem className="hidden lg:flex">
<Link href="#">Login</Link>
</NavbarItem>
<NavbarItem>
<Button as={Link} color="primary" href="#" variant="flat">
Sign Up
</Button>
</NavbarItem>
</NavbarContent>
<NavbarMenu>
{menuItems.map((item, index) => (
<NavbarMenuItem key={`${item}-${index}`}>
<Link
color={
index === 2 ? "primary" : index === menuItems.length - 1 ? "danger" : "foreground"
}
className="w-full"
href="#"
size="lg"
>
{item}
</Link>
</NavbarMenuItem>
))}
</NavbarMenu>
</Navbar>
)
}
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: [
// ...
"./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
],
};
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: [
'src/**/*.{js,jsx,ts,tsx,html}',
"../node_modules/@nextui-org/**/dist/**/*.{js,ts,jsx,tsx}",
],
};
Thank you very much @arimendelow for your support and suggestion. Thank you for your time.
2 Likes