Tailwind doesnt apply on my Next JS 15 app

Question

I wanted to implement multilanguage support with next-intl and I changed my file structure like this:

app/

  favicon.ico

  globals.css

  [locale]/

    layout.tsx

    page.tsx       

    (root)/

      services/

        page.tsx

      gallery/

        page.tsx

      reviews/

        page.tsx

In my layout.tsx I do import the globals.css like: import "../globals.css"

For some reason, it doesnt apply Tailwind to any of my pages. Maybe I'm doing something wrong, I don't know. I'm new to Next. Im using [email protected]

Here is my postcss.config.js:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {}
  }
}

And my tailwind.config.ts:

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
        './pages/**/*.{js,ts,jsx,tsx}',
        './public/**/*.{html,js}'],
    theme: {
        extend: {
            fontFamily: {
                kollektiv: ['Kollektif', 'sans-serif'],
            },
            animation: {
                'border-pulse-red': 'borderPulseRed 1.5s infinite',
            },
            keyframes: {
                borderPulseRed: {
                    '0%, 100%': { borderColor: '#fee2e2' },
                    '50%': { borderColor: '#ef4444' },
                },
            },
        },
    },
    plugins: [],
};

Also here is my globals.css:

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

@layer utilities {
  .dark {
    @apply dark:bg-background dark:text-foreground;
  }

  .dark * {
    @apply dark:border-border dark:outline-ring/50;
  }

  .navbar_ul {
    @apply flex items-center gap-6 ml-6 text-lg font-semibold text-gray-700 transition-all duration-500;
  }

  .footer_section {
    @apply flex items-center justify-around gap-4 px-2 py-4 bg-[#1E1E1E];
  }

  .animate-float {
    animation: float 4s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .link-hover-effect {
    color: #d1d5db; /* Tailwind's text-gray-300 */
    transition-property: color, transform, text-decoration;
    transition-duration: 300ms;
  }

  .link-hover-effect:hover {
    color: #fff; /* Tailwind's text-white */
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: scale(1.05);
  }


  .nav-underline {
    @apply relative cursor-pointer;
  }

  .nav-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #0d9488, #2563eb); /* teal-600 to blue-600 */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }

  .nav-underline:hover::after {
    transform: scaleX(1);
  }


  .navbar_ul > li {
    @apply relative cursor-pointer;
  }

  .navbar_ul > li::after {
    content: '';
    display: block;
    height: 2px;
    background-color: #60a5fa;
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: left;
  }

  .navbar_ul > li:hover::after {
    transform: scaleX(1);
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Let me know if you need any other files for reference. Thank you in advance!

I tried to add multilanguage support and I had to change the file structure and add my app files under [locale] folder and now my tailwind doesnt apply to any of my pages. The next-intl does work fine, I tried to change it on the messed up page that I had.

rozsazoltan · Accepted Answer · 2025-07-25 14:48:37Z

You're using TailwindCSS v4, which is the latest version of TailwindCSS since January 2025. Unfortunately, many earlier unofficial guides have become outdated due to several - otherwise great - breaking changes introduced in this version.

TailwindCSS v3

Those older guides are specific to v3, so you can only follow them if you install TailwindCSS v3 specifically.

npm uninstall @tailwindcss/postcss
npm install tailwindcss@3 postcss autoprefixer

TailwindCSS v4

Instead, I recommend getting familiar with v4's proper Next.js integration through the official documentation - it's much easier now.

npm uninstall autoprefixer
npm install tailwindcss @tailwindcss/postcss postcss

Specifically in your case, you've already installed the tailwindcss and @tailwindcss/postcss packages. Rename your postcss.config.js to postcss.config.mjs and replace its content with a new ES6-based version, like this:

Invalid PostCSS Plugin found using TailwindCSS 4

postcss.config.mjs

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

As of v4, the tailwind.config.js file is no longer used (remove tailwind.config.js) - all configuration is now done in the CSS-first setup.

How to switch to a CSS-first configuration in Tailwind CSS v4 and above

The content property has been completely removed and replaced by automatic source detection.

The theme.extend section now looks like this in CSS-first mode, inside the globals.css file.

Also, note that @tailwind directives are no longer used in globals.css - instead, you should use @import "tailwindcss";. Like this:

Removed @tailwind directives

globals.css

@import "tailwindcss";

@theme {
  --font-kollektiv: 'Kollektif', 'sans-serif';
  --animate-border-pulse-red: borderPulseRed 1.5s infinite;

  @keyframes borderPulseRed {
    0%, 100% {
      border-color: #fee2e2;
    }
    50% {
      border-color: #ef4444;
    }
  }
}

@layer utilities {
  .dark {
    @apply dark:bg-background dark:text-foreground;
  }

  .dark * {
    @apply dark:border-border dark:outline-ring/50;
  }

  .navbar_ul {
    @apply flex items-center gap-6 ml-6 text-lg font-semibold text-gray-700 transition-all duration-500;
  }

  .footer_section {
    @apply flex items-center justify-around gap-4 px-2 py-4 bg-[#1E1E1E];
  }

  .animate-float {
    animation: float 4s ease-in-out infinite;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .link-hover-effect {
    color: #d1d5db; /* Tailwind's text-gray-300 */
    transition-property: color, transform, text-decoration;
    transition-duration: 300ms;
  }

  .link-hover-effect:hover {
    color: #fff; /* Tailwind's text-white */
    text-decoration: underline;
    text-underline-offset: 4px;
    transform: scale(1.05);
  }


  .nav-underline {
    @apply relative cursor-pointer;
  }

  .nav-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, #0d9488, #2563eb); /* teal-600 to blue-600 */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }

  .nav-underline:hover::after {
    transform: scaleX(1);
  }


  .navbar_ul > li {
    @apply relative cursor-pointer;
  }

  .navbar_ul > li::after {
    content: '';
    display: block;
    height: 2px;
    background-color: #60a5fa;
    transform: scaleX(0);
    transition: transform 0.3s;
    transform-origin: left;
  }

  .navbar_ul > li:hover::after {
    transform: scaleX(1);
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

For more information read this: Description of tailwind-css tag and Description of tailwind-css-4 tag - Maybe useful for VSCode: Tailwind CSS v4 - Unknown at rule @plugin, @custom-variant, @theme, @utility, @variant, @apply, @source, @reference in global.css
Thanks,man.It worked,i'm not a front end developer so when tailwind v4 came out i didnt think it would change so much, i whip it out only when i need it,but its still nice to learn something new.I appreciate it.

Collectives™ on Stack Overflow

Tailwind doesnt apply on my Next JS 15 app

1 Answer 1

TailwindCSS v3

TailwindCSS v4

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

TailwindCSS v3

TailwindCSS v4

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related