Note: For this to work, we swapped to `bundler` for module resolution,
which is recommended by TypeScript community.
This upgrade addresses breaking changes in flowbite-react 0.12.x
including
the removal of compound components in favour of simple component
imports.
Breaking changes addressed:
1. Tailwind CSS configuration
- Changed import from 'flowbite-react/tailwind' to
'flowbite-react/plugin/tailwindcss'
- Updated plugin API: flowbite.plugin() → flowbite (direct export)
- Replaced flowbite.content() with manual path
'./node_modules/flowbite-react/dist/**/*.js'
2. Component API changes (compound → simple components)
- Accordion: Accordion.Panel → AccordionPanel, Accordion.Title →
AccordionTitle, etc.
- Tabs: Tabs.Item → TabItem
- Sidebar: Sidebar.Item → SidebarItem, Sidebar.Items → SidebarItems,
etc.
- Clipboard: Clipboard.WithIcon → ClipboardWithIcon
Additional fixes:
- Adjusted clipboard icon positioning (increased top margin from top-2
to top-4)
to properly align with code block borders as it was misaligned after the
upgrade
All components tested and verified working:
- Accordion, Tabs, Sidebar, Clipboard, Tooltip, Navbar
- Custom theming preserved and functioning correctly
- No obvious regressions during side-by-side testing with online version