Datepicker Icon and date overlap when using Flowbite React in Astro.JS project

[codewriter3000]

Describe the bug I'm using the Flowdate date picker in Astro.JS and I see an overlap between the icon and the date text, as well as no padding on to the left side. Also, when I click on the datepicker it should display a calendar but it doesn't do anything.

To Reproduce Steps to reproduce the behavior:

1. Create an Astro project
2. Enable React
3. Install flowbite-react
4. Drop this in an Astro page:

   import { Datepicker } from 'flowbite-react';
   ...
   <Datepicker />

Expected behavior I expect it to work as expected.

Screenshots

Desktop (please complete the following information):

• OS: Window
• Browser: Microsoft Edge 120.0.2210.121
• Version: 0.7.2

[Abhishekbharti9910]

Same Issue encountered did you got the solution for this or any alternatives.

[dlopesa]

Same issue, so far no reply

[raphaelalingig]

same in reactjs still overlapping still no fix

[dlopesa]

I was able to fix it

[dlopesa]

go on the tailwind config and make sure you have these: content: ['./src/**/*.{js,jsx,ts,tsx}', '/node_modules/tailwind-datepicker-react/dist/**/*.js', './public/index.html', './resources/js/**/*.js', './node_modules/flowbite/**/*.js', 'node_modules/flowbite-react/lib/esm/**/*.js','./node_modules/react-tailwindcss-datepicker/dist/index.esm.js', flowbite.content(),], and plugins: [ flowbite.plugin(), ],

also add this on top const flowbite = require("flowbite-react/tailwind");

That fixed it for me

[dlopesa]

this is the all file:

/** @type {import('tailwindcss').Config} */
const flowbite = require("flowbite-react/tailwind");
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', '/node_modules/tailwind-datepicker-react/dist/**/*.js',  './public/index.html', './resources/js/**/*.js', './node_modules/flowbite/**/*.js', 'node_modules/flowbite-react/lib/esm/**/*.js','./node_modules/react-tailwindcss-datepicker/dist/index.esm.js', flowbite.content(),],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        'color1': '#fb6b5c',
        'color1-2': '#cb5c57',
        'color1-3': '#954f4e',
        'color2': '#28353b',
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    flowbite.plugin(),
  ],
};

[zoltanszogyenyi]

@dlopesa is right, you need to make sure the tailwind config paths are correct