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.

react-tailwinds-datepicker.bug.mp4

I submitted a PR to fix the problem #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';