I'm trying to configure Hero UI (or any component library) with the latest versions of Tailwind CSS and Next.js. However, I'm facing issues because there's no tailwind.config.js file in my project, and I'm unsure how to proceed with the configuration.

Here are the details:

Versions:

Next.js: 14.x

Tailwind CSS: 3.x

Hero UI: latest

Issue:

After installing Tailwind CSS using the official guide, I don't see a tailwind.config.js file in my project.

I need to customize Tailwind to work with Hero UI components, but I'm unable to do so without the config file.

Steps I've Taken:

Installed Tailwind CSS using the following command:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Added the following to my postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Added the following to my globals.css

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

Expected Behavior:

A tailwind.config.js file should be generated automatically, allowing me to customize Tailwind for Hero UI.

Actual Behavior:

No tailwind.config.js file is created, and I'm unable to configure Tailwind for Hero UI.

Additional Information:

I'm using the latest versions of Next.js and Tailwind CSS.

I've tried manually creating a tailwind.config.js file, but I'm unsure of the correct configuration for Hero UI.

Could someone please guide me on how to resolve this issue? Thank you!

I'm trying to configure Hero UI (or any component library) with the latest versions of Tailwind CSS and Next.js. However, I'm facing issues because there's no tailwind.config.js file in my project, and I'm unsure how to proceed with the configuration.

Here are the details:

Versions:

Next.js: 14.x

Tailwind CSS: 3.x

Hero UI: latest

Issue:

After installing Tailwind CSS using the official guide, I don't see a tailwind.config.js file in my project.

I need to customize Tailwind to work with Hero UI components, but I'm unable to do so without the config file.

Steps I've Taken:

Installed Tailwind CSS using the following command:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Added the following to my postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Added the following to my globals.css

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

Expected Behavior:

A tailwind.config.js file should be generated automatically, allowing me to customize Tailwind for Hero UI.

Actual Behavior:

No tailwind.config.js file is created, and I'm unable to configure Tailwind for Hero UI.

Additional Information:

I'm using the latest versions of Next.js and Tailwind CSS.

I've tried manually creating a tailwind.config.js file, but I'm unsure of the correct configuration for Hero UI.

Could someone please guide me on how to resolve this issue? Thank you!

• typescript
• next.js
• tailwind-css
• nextui

1 Answer 1

TailwindCSS v3

Although older guides may state that these steps install TailwindCSS v3, since January 2025, running npm install tailwindcss actually installs the new v4 stable release.

Unfortunately, v4 introduces significant breaking changes and requires completely different installation steps. If you still want to use TailwindCSS v3, follow these steps:

npm install tailwindcss@3

• Problem installing TailwindCSS with "npx tailwindcss init -p" command - StackOverflow

The installation guide for TailwindCSS v3 has also been updated:

• Get started TailwindCSS v3 with PostCSS for Next.js - TailwindCSS v3 Docs
• Updating old (v3) installation guides - issue #1971 - GitHub
• Use tailwindcss@3 in v3 docs - PR #2022 - GitHub

npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init

postcss.config.mjs

export default {
  plugins: {
    "tailwindcss": {},
  }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

global.css

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

TailwindCSS v4

If you want to install TailwindCSS v4, review the changes and follow the new installation steps:

• Get started TailwindCSS v3 with PostCSS for Next.js - TailwindCSS v4 Docs
• How to install TailwindCSS v4 with PostCSS instead of TailwindCSS v3? - StackOverflow
• What's changed from v4? - StackOverflow
• Upgrading your Tailwind CSS projects from v3 to v4 - TailwindCSS v4 Docs

npm uninstall autoprefixer
npm install tailwindcss @tailwindcss/postcss postcss

From v4 onwards, the init process is no longer required.

• Problem installing TailwindCSS with "npx tailwindcss init -p" command - StackOverflow

postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {}, /* instead of tailwindcss */
  }
}

From v4 onwards, tailwind.config.js is no longer needed.

• New CSS-first configuration option in v4 (without tailwin.config.js) - StackOverflow
• Automatic Source Detection from TailwindCSS v4 - StackOverflow

global.css

@import "tailwindcss";

• Removed @tailwind directives - StackOverflow