Some classes of tailwind CSS not working when we import flowbite.css(Flowbite Blocks) in Next js

[pradeep538]

We did the flowbite integration according to the documentation for react Next JS, and flowbite React components are working fine but when i tried to use Flowbite Blocks components like Hero, Marketing, Testimonials, by adding Flowbite.css. With flowbite css, Flowbite blocks components are working fine but some of the Tailwind Css classes(break points like md: sm:) are not working.

Steps to reproduce:

1. Create fresh project with create next app with tailwind integrated.
2. Integrate Flowbite as recommended in documentation https://flowbite.com/docs/getting-started/next-js
3. Use Testimonial with carousel code snippet from (https://flowbite.com/blocks/marketing/testimonial/#carousel-slider)

You can observe testimonial carousel UI broken

as a work around steps:

1. try to import flowbite.min.css from node_modules/flowbite/dist/
2. Testimonial carousels UI will work seamlessly, but tailwind css "w-14 md:w-20" will break

[zoltanszogyenyi]

Hey @pradeep538,

Thanks for supporting our work!

I think that you shouldn't import the CSS file from node_modules - instead you should set up Tailwind CSS with Next.js and the configuration file paths so that you will build the CSS on demand instead of having everything at once.

This will also massively increase performance.

You can check this official guide too for the Next.js & Tailwind CSS integration: https://tailwindcss.com/docs/guides/nextjs

[pradeep538]

Thanks for the reply @zoltanszogyenyi ,

Apologise, i have written wrongly tailwind.min.css, that is actually flowbite.min.css

Please explain how to configure flowbite css for Flowbite Blocks