search

themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.61k stars 715 forks source link

Tailwind UI not working with flowbite CDN #622

Closed Sammeeey closed 1 year ago

Sammeeey commented 1 year ago

Describe the bug The feature section With product screenshot from Tailwind UI doesn't anymore as soon as I include the flowbite using the CDN option using vanilla HTML/CSS/JS.

To Reproduce Steps to reproduce the behavior:

  1. setup tailwind UI
  2. include flowbite via CDN
  3. create HTML file with feature section With product screenshot 
    <head>
<link href="/dist/output.css" rel="stylesheet">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.css" rel="stylesheet" />
<script src="index.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.js" defer></script>
</head>
<body>
<!-- feature section code here -->
</body>

Expected behavior Tailwind UI feature section shouldn't change.

Screenshots This is how the section looks on desktop for me after adding flowbite via CDN: grafik

Desktop (please complete the following information):

zoltanszogyenyi commented 1 year ago

Hey @Sammeeey,

Remove this:

<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/flowbite.min.css" rel="stylesheet" />

And preferably you should set up Flowbite via NPM and install the plugin in tailwind.config.js:

https://flowbite.com/docs/getting-started/quickstart/

Then it should work seamlessly!

Cheers, Zoltan

Sammeeey commented 1 year ago

Simply removing the line as you said, worked. But why is it then described to include this line in https://flowbite.com/docs/getting-started/quickstart/#include-via-cdn ?

Setting up flowbite via NPM (as you suggested) also works.

Thank you @zoltanszogyenyi