Not able to setup Tailwind V4 in Next.js and bootstrap project.

[abhinav-goel-11]

I'm not able to set up tailwind v4 to my existing next.js and bootstrap project. I was able to do it with v3. To avoid classnames conflicts between tailiwnd and bootstrap i was trying to use the prefix(), but didn't worked with V4.

ps: i'm not using typescript.

Here are the steps i took to install it :

1. npm install tailwindcss @tailwindcss/postcss postcss.
2. Created a postcss.config.mjs. with content
   const config = {
   plugins: {
   "@tailwindcss/postcss": {},
   },
   };

export default config;

3. Created a globals.css file and @import "tailwindcss";
4. Imported the globals.css in my layout file.
5. Restarted my development server.

Then when i started to apply classes it isn't working. the only catch is i also have another globals.scss file and many more scss file in my projects but i doubt they are causing the issue.

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a look for you.

[abhinav-goel-11]

Thanks for responding.
https://github.com/abhinav-goel-11/dummy

i have tried to this dummy project with same versions of next.js with react bootstrap from my work. Encountering the the same problem here 😭. kindly look into it.

[rozsazoltan]

@abhinav-goel-11 You have two different files. One is ./src/app/globals.css, which only imports TailwindCSS. The other is ./src/styles/globals.css, which imports Bootstrap and some unlayered styles. These unlayered styles are very strong and cannot be overridden from the utilities layer. See a more detailed explanation in some related questions:

• From v4 the reset style cannot be overridden by TailwindCSS classes
• What is the purpose of the Tailwind @layer directive?

So drop the unlayered CSS and place your default styling into the base layer in globals.scss:

@import '~bootstrap/scss/bootstrap';

@layer base {
  :root {
    height: 100%;
    width: 100%;
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html,
  body {
    height: 100%;
    width: 100%;
  }

  .btn-primary {
    background-color: #08f300 ;
    color: white ;
    font-size: 14px;
    font-weight: 600;
  }
}

If needed, you can also place Bootstrap into a layer:

• How can I insert a custom layer between TailwindCSS's default base, components and utilities layers?
• https://stackoverflow.com/a/79739699/15167500

[abhinav-goel-11]

Even after doing this still my tailwind classes are not getting applied. Are you able to do son in the provided repo kindly take pull to i have fixed the package.json file and used jsx instead of js files.

One more thing i noticed even if i only import the ./globals.css file in my layout.jsx which inly has @import "tailwindcss" the styled are't working.

[wongjn]

Try updating next by running (will also need to install sass explicitly`

npm i next@14 sass

You should then at least see the Tailwind class being generated:

Then, to actually get things working, I would drop Sass completely and move everything into one CSS file:

diff --git a/src/app/globals.css b/src/app/globals.css
index f1d8c73..404fde6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1 +1,24 @@
 @import "tailwindcss";
+@import 'bootstrap/dist/css/bootstrap.css' layer(components);
+
+@layer base {
+  :root {
+    height: 100%;
+    width: 100%;
+  }
+
+  html,
+  body {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    background-color: #08f300 ;
+    color: white ;
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
\ No newline at end of file
diff --git a/src/app/layout.jsx b/src/app/layout.jsx
index 7dc8c8b..9aef1df 100644
--- a/src/app/layout.jsx
+++ b/src/app/layout.jsx
@@ -1,5 +1,4 @@
 import { Inter } from "next/font/google";
-import "../styles/globals.scss";
 import "./globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
deleted file mode 100644
index b85c3f1..0000000
--- a/src/styles/globals.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-
-@import '~bootstrap/scss/bootstrap';
-
-:root {
-	height: 100%;
-	width: 100%;
-}
-
-* {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-}
-
-html,
-body {
-	height: 100%;
-	width: 100%;
-}
-
-.btn-primary {
-    background-color: #08f300 ;
-	color: white ;
-	font-size: 14px;
-	font-weight: 600;
-}
\ No newline at end of file

npm uninstall sass

[abhinav-goel-11]

Thanks for your help. I can confirm that after upgrading my Next.js 14 project to the latest version, the Tailwind classes are now generating correctly.

My Understanding of the Core Issue
Based on your explanation, it seems the root of the problem lies with Sass compatibility. My understanding is that Tailwind CSS v4 handles preprocessors differently than v3, which is why my previous Sass setup that worked perfectly with v3 is now causing issues. Is this understanding correct?

The problem I'm facing is that with v4, using Tailwind seems to break my existing Sass-based styles, even when I correctly place the CSS in the base and components layers. This suggests I would need to remove Sass entirely for v4 to function properly.

Proposed Migration Strategy
My project is quite large and relies heavily on an established Sass codebase (variables, mixins, etc.). A complete, one-time migration from Sass to CSS isn't feasible right now.

Therefore, my plan is to revert to Tailwind CSS v3 for the time being. This would allow me to keep my existing Sass files working while I gradually migrate components and variables to Tailwind's modern CSS structure piece by piece.

Questions & Advice
With that context, I have two quick questions:

• Does my proposed strategy of using Tailwind v3 for a gradual migration seem like a reasonable approach?

• Do you have any tips or best practices for migrating from Sass to Tailwind's CSS structure? Specifically, I'm looking for advice on converting Sass variables ($variable) and logic into the :root and @theme conventions.

Any insights you can provide on this would be extremely helpful.

[wongjn]

I'd say try to move custom Sass into Tailwind class names in the HTML. Try to use components to abstract patterns (perhaps as equivalents to mixins, etc).