CSS Modules in TailwindCSS

With “tailwindcss”: “^3.4.1” and shadcn/ui + Next.js, I was able to successfully connect custom styles not only in separate .css files, but also use them in CSS Modules.

👉 src

✅ layout.tsx

import "./globals.css";
import "./styles/_default.css";
import "./styles/_text.css";
import "./styles/_nav.css";

✅ globals.css

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


@layer base {
 /* base styles */
}

✅ _default.css

@tailwind base;
@layer base {
 * {
 @apply border-border;
 }
 /* more custom styles... */
}

✅ component.module.css

.badge {
 @apply bg-black border-none text-white px-4 py-2 font-normal inline-flex mr-2 cursor-pointer select-none;
}

✅ postcss.config.mjs

/** @type {import('postcss-load-config').Config} */
const config = {
 plugins: {
 tailwindcss: {},
 },
};


export default config;

✅ This setup works: you can use Tailwind and ShadCN variables both in global styles and in CSS Modules.

📦 Tailwind classes are available in .module.css files because they’re compiled correctly via PostCSS.

@apply Tailwind’s inside module.css !!!

👉 my_exaple

Anastasiia Berest

Senior Web UI Engineer

I'm a web development passionate about creating meaningful digital experiences.