[BUG] - Nextui styles

[peteole]

NextUI Version

2.2.9

Describe the bug

The tailwind styles are not applied after an upgrade from nextui 1.x

Your Example Website or App

https://github.com/peteole/portfolio/tree/nextui-2

Steps to Reproduce the Bug or Issue

run npm run dev, open the browser

Expected behavior

CSS loads

Screenshots or Videos

This is how it looks like... ... vs how it should look like

Operating System Version

macOS

Browser

Chrome

[rodolfobarretoweb]

I'm having the same issue, does anyone know how to fix that?

[piercy]

@peteole @rodolfobarretoweb check your tailwind.config.js. From the install docs it should look something like the below. usually when I don't see styles, this is the issue. You may need to change then // ... part to be a path to your files

https://tailwindcss.com/docs/installation https://nextui.org/docs/guide/installation#tailwind-css-setup

// 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()],
};

[caudurodev]

Can confirm downgrading from 2.2.9 to 2.2.8 works as expected. 2.2.9 introduced some CSS issue where nextui does not render styling correctly.

This is with a default next 14.1 installation (with all presets) following instructions from the docs https://nextui.org/docs/frameworks/nextjs

[vadxq]

Is it just the nextui style that doesn't work? And the style of tailwind can work? If this is the case, after following the steps in the nextui official docs, you also need to install and update this package: @nextui-org/theme

"@nextui-org/button": "^2.0.26",
"@nextui-org/react": "^2.2.9",
"@nextui-org/theme": "^2.1.17",

This is missing from the official docs