DEV Community

Samit Kapoor
Samit Kapoor

Posted on • Edited on

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

#webdev #nextjs #tailwindcss

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Namespace Utility Classes
--color-* Color utilities like bg-red-500, text-sky-300, and many more
--font-* Font family utilities like font-sans
--text-* Font size utilities like text-xl
--breakpoint-* Responsive breakpoint variants like sm:*
--spacing-* Spacing and sizing utilities like px-4, max-h-16, and many more
--shadow-* Box shadow utilities like shadow-md

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!

Top comments (0)