How to Customize Tailwind CSS in Next.js 15 Without tailwind.config.js?

Tailwind CSS v4 and Next.js 15 introduce a new way of customizing your design tokens and themes, without even touching a tailwind.config.js file. If you’re used to defining your custom colors, fonts, and spacing inside the config file, this new @theme inline approach might feel unfamiliar at first but it’s incredibly powerful.

In this post, I’ll walk you through How to customize your Tailwind setup using @theme inline

🧪 Why tailwind.config.js Is Optional in Next.js 15

Starting with Tailwind CSS v4, the team is moving toward a zero-config setup. When you're working in a modern framework like Next.js 15, Tailwind automatically configures itself via PostCSS and globals.css, meaning you don’t need a tailwind.config.js file unless you're doing something advanced like adding plugins.

With the new @theme directive, you can define custom design tokens inline in your CSS file (usually globals.css), which Tailwind will pick up and compile at build time.

✍️ How to Use @theme inline in Next.js 15

Here’s how you can define custom colors, fonts, and other variables in globals.css using @theme inline:

/* app/globals.css */

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: #66BB6A;
  --color-error: #d90000;
  --font-chillax: 'Chillax-Variable', sans-serif;
}

Then you can use these values in your utility classes just like built-in tokens:

<div className="bg-primary text-foreground font-chillax">
  Hello from your custom Tailwind setup!
</div>

Here are some of the available theme variables that you can use!

Check the full list here

🚀 Final Thoughts

Tailwind CSS v4 and Next.js 15 are simplifying frontend development by making configuration less painful and more in line with modern web standards. Using @theme inline, you can now:

• Customize colors, fonts, spacing directly in CSS
• Get full IntelliSense support in your editor
• Avoid bloated config files for simple setups

If you're building your next project with Next.js 15, give this approach a try, you might not even miss your tailwind.config.js.

Read more about TailwindCSS V4 updates

Hi, I'm Samit. A Software Developer and a freelancer who’s always on the lookout for exciting, real world projects to build and contribute to. I love hearing from people, whether it’s to collaborate, share ideas, or work together.

If you're looking to hire a passionate developer or even if you just want to say hi, feel free to check out my portfolio and reach out. I'd love to connect!