Upgrade to Tailwinds v4

[John4E656F]

Hi, the tailwinds has update to v4.

With this update we are getting a bug where the datepicker popup doesn't appear.

https://github.com/user-attachments/assets/771f8c4f-c340-4501-b3e9-d66f67eb7070

I submitted a PR to fix the problem https://github.com/onesine/react-tailwindcss-datepicker/pull/307

[John4E656F]

A temporary fix

in global.css file add .opacity-1 { opacity: 100%; }

Like this

@layer utilities {
 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Roboto Condensed', sans-serif;
  }
.opacity-1 {
     opacity: 100%;
 }
}

[davecarlson]

the opacity bug technically exists in tailwind v3 aswell, "opacity-1" should always have been opacity-100, in both v3 and v4

[John4E656F]

My last version was Tailwinds v3 and the opacity-1 worked. Only when I updated to v4 I got this problem.

[davecarlson]

My last version was Tailwinds v3 and the opacity-1 worked. Only when I updated to v4 I got this problem.

Yeah, mine too. but it works because the rule is getting ignored. So if we just quickly patch that line to opacity-100 it'll work in both v3 and v4 without other tweaks

[mariczone]

where I can put "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js" in tailwindcss4. I think my css not working.

[Avery246813579]

where I can put "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js" in tailwindcss4. I think my css not working.

I am using Nextjs and Tailwind Postcss. I created a tailwind.config.ts

export default { content: [ "./app/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}", "../../node_modules/react-tailwindcss-datepicker/dist/*.{js,ts,jsx,tsx}", ], };

and inside my globals.css I added in the following

@config './tailwind.config.ts';

[geniuscd]

I encountered the same issue in my Next.js project (v15.3.4) using Tailwind CSS (v4.1.11). I didn’t originally have a tailwind.config.js file, so I created one, but that didn’t resolve the problem. I also tried @Avery246813579’s suggestion, but unfortunately, it didn’t work for me. For context, my global.css file only contains @import "tailwindcss"; along with several custom CSS rules.

I also tried npx tailwindcss init but it did not work. How can I include the css of the library into my global.css or at least make it work?

[danieltellezllinas]

I encountered the same issue in my Next.js project (v15.3.4) using Tailwind CSS (v4.1.11). I didn’t originally have a tailwind.config.js file, so I created one, but that didn’t resolve the problem. I also tried @Avery246813579’s suggestion, but unfortunately, it didn’t work for me. For context, my global.css file only contains @import "tailwindcss"; along with several custom CSS rules.

I also tried npx tailwindcss init but it did not work. How can I include the css of the library into my global.css or at least make it work?

same issue

[RomualdYT]

Any news about the update ? :)

[marcio-b]

I've managed to make it work on React 19 + Tailwind v4 using:

• the tailwind.config.js file on the root (as instructed in getting started the docs)
• the use of the @config directive in the index.css file like this:

/* ... other imports */
@config "../../tailwind.config.js";
/* ...rest of my css code */

• lastly, the "opacity-1" fix:

.opacity-1 {
     opacity: 100%;
 }

hope it helps while the upgrade arrives.