4

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!

Improve this question

2 Answers 2

Reset to default
3

TailwindCSS v4

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

npm uninstall autoprefixer
npm install tailwindcss @tailwindcss/postcss postcss

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

postcss.config.mjs

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

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

global.css

@import "tailwindcss";

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

The installation guide for TailwindCSS v3 has also been updated:

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;
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

In Tailwind CSS v4, the tailwind.config.js file no longer exists — that's why you can’t find it.

Tailwind 4 introduced a new configuration system that uses the @theme and @import directives directly inside your CSS instead of a config file.

So instead of customizing Tailwind through tailwind.config.js, you now customize everything inside your main CSS file(global.css file in next.js), like this

@import "tailwindcss";

@theme {
  --color-brand: #4f46e5;
  --radius-card: 12px;
}
Improve this answer
New contributor
A-samad is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

1 Comment

Yeah: stackoverflow.com/a/79519233/15167500

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.