DEV Community

Cover image for A Quick Tip for Tailwind CSS v4: The End of tailwind.config.js
Shubhra Pokhariya
Shubhra Pokhariya

Posted on

A Quick Tip for Tailwind CSS v4: The End of tailwind.config.js

Hi everyone,

I’m Shubhra - a full-stack developer who enjoys turning ideas into simple, clean, user-friendly products. Recently, I’ve been working with Next.js 15 and Tailwind CSS v4 to build high-converting landing pages.

Until now, I never really shared my process - I’d just finish a project quietly and move on. But this time, I want to try something new: building in public and sharing lessons as I go.

To start off, here’s one small thing I learned this week about Tailwind CSS v4.

Tailwind v4: No More tailwind.config.js

In v3, you always had to keep a tailwind.config.js file to customize themes.

Now in v4, it’s all CSS-native — you can define your theme right inside a CSS file.

Example:

/* global.css */ @import "tailwindcss"; @theme { --color-brand: #4f46e5; --font-display: "Inter", sans-serif; }

Now you can use these directly in your components:

export default function Button() { return ( <button className="px-4 py-2 rounded-lg bg-brand text-white font-display"> Click Me </button> ); }

Cleaner setup, fewer files, and your HTML stays neat.

What’s Next

In upcoming posts, I’ll share more of my learnings while building landing pages, like:

Responsive layout patterns that actually look professional

How I structure components for reusability in Next.js 15

Performance tips (I was surprised how fast the new Oxide engine is)

I’d also love to hear from you:

What’s your favorite “small but powerful” feature in Tailwind or Next.js right now?

Looking forward to learning and sharing with you all.

Top comments (0)