Open dimaslanjaka opened 5 months ago
can u please use the latest flowbite-react
version? which is currently 0.7.2
and then report back
The tutorial on https://www.flowbite-react.com/docs/components/tabs is for the latest version of flowbite-react
, since 0.5.0
lot of things changed and it would be a massive slowdown if we start debugging old unstable versions.
I suggest we try to replicate ur local dev env using the latest version of flowbite-react
and dig from there down. I believe this is solvable at the webpack/postcss level rather than at the library level, since the library works on all available React platforms (i tested this myself when i wrote the tutorials in the docs).
@SutuSebastian can you give me an example working postcss webpack config which working for latest react-flowbite ?
because no documentation for config postcss for flowbite-react
Can u go a bit more in details regarding ur local development server? (eg: CRA / ejected CRA / Vite / Webpack / Parcel / ...etc), what parsers/plugins/extentions/etc did u use 🤔
Can u go a bit more in details regarding ur local development server? (eg: CRA / ejected CRA / Vite / Webpack / Parcel / ...etc), what parsers/plugins/extentions/etc did u use 🤔
I had the same issue on 0.6.4, upgraded to 0.7.2 and the issue is resolved on my end
I had the same issue on 0.6.4, upgraded to 0.7.2 and the issue is resolved on my end
is in your project working using webpack ? can you show me configuration of your PostCSS and other stylesheet process webpack ? because no documentation to setting it, i think this the major problem of this problem https://github.com/themesberg/flowbite-react/issues/1065
May need some cleanup but here is what we have
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
tailwind.config.js
import flowbite from "flowbite/plugin";
// import flowbiteTypography from "flowbite-typography";
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./node_modules/flowbite/**/*.js",
"./node_modules/flowbite-react/lib/**/*.js",
"./app/**/*.{js,ts,jsx,tsx,mdx}", // Note the addition of the `app` directory.
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@tremor/**/*.{js,ts,jsx,tsx}", // Tremor module
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
fontFamily: {
lobster: ["Lobster", "cursive"],
roboto: ["Roboto", "sans-serif"],
inter: [
"Inter",
"ui-sans-serif",
"system-ui",
"-apple-system",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
"Noto Sans",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
],
charts: [
"Inter",
"ui-sans-serif",
"system-ui",
"-apple-system",
"system-ui",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
"Noto Sans",
"sans-serif",
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji",
],
// sans: [
// "Inter",
// "ui-sans-serif",
// "system-ui",
// "-apple-system",
// "system-ui",
// "Segoe UI",
// "Roboto",
// "Helvetica Neue",
// "Arial",
// "Noto Sans",
// "sans-serif",
// "Apple Color Emoji",
// "Segoe UI Emoji",
// "Segoe UI Symbol",
// "Noto Color Emoji",
// ],
},
transparent: "transparent",
current: "currentColor",
extend: {
colors: {
primary: {
50: "#eff6ff",
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a",
950: "#172554",
},
// light mode
tremor: {
brand: {
faint: "#eff6ff", // blue-50
muted: "#bfdbfe", // blue-200
subtle: "#60a5fa", // blue-400
DEFAULT: "#3b82f6", // blue-500
emphasis: "#1d4ed8", // blue-700
inverted: "#ffffff", // white
},
background: {
muted: "#f9fafb", // gray-50
subtle: "#f3f4f6", // gray-100
DEFAULT: "#ffffff", // white
emphasis: "#374151", // gray-700
},
border: {
DEFAULT: "#e5e7eb", // gray-200
},
ring: {
DEFAULT: "#e5e7eb", // gray-200
},
content: {
subtle: "#9ca3af", // gray-400
DEFAULT: "#6b7280", // gray-500
emphasis: "#374151", // gray-700
strong: "#111827", // gray-900
inverted: "#ffffff", // white
},
},
// dark mode
"dark-tremor": {
brand: {
faint: "#0B1229", // custom
muted: "#172554", // blue-950
subtle: "#1e40af", // blue-800
DEFAULT: "#3b82f6", // blue-500
emphasis: "#60a5fa", // blue-400
inverted: "#030712", // gray-950
},
background: {
muted: "#131A2B", // custom
subtle: "#1f2937", // gray-800
DEFAULT: "#111827", // gray-900
emphasis: "#d1d5db", // gray-300
},
border: {
DEFAULT: "#1f2937", // gray-800
},
ring: {
DEFAULT: "#1f2937", // gray-800
},
content: {
subtle: "#4b5563", // gray-600
DEFAULT: "#6b7280", // gray-500
emphasis: "#e5e7eb", // gray-200
strong: "#f9fafb", // gray-50
inverted: "#000000", // black
},
},
},
boxShadow: {
// light
"tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"tremor-card":
"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
"tremor-dropdown":
"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
// dark
"dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"dark-tremor-card":
"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
"dark-tremor-dropdown":
"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
},
borderRadius: {
"tremor-small": "0.375rem",
"tremor-default": "0.5rem",
"tremor-full": "9999px",
},
fontSize: {
"tremor-label": ["0.75rem"],
"tremor-default": ["0.875rem", { lineHeight: "1.25rem" }],
"tremor-title": ["1.125rem", { lineHeight: "1.75rem" }],
"tremor-metric": ["1.875rem", { lineHeight: "2.25rem" }],
},
},
},
plugins: [
// flowbiteTypography,
flowbite,
],
darkMode: "class",
};
webpack config in nextjs
webpack(config) {
config.module.rules.push({
test: /\.svg$/,
use: ["@svgr/webpack"],
});
return config;
},
after update 0.7.x
got new error
ERROR in ./node_modules/flowbite-react/lib/esm/index.js 52:0-55
Module not found: Error: Can't resolve './theme-store' in 'E:\Repositories\android-blog\release-repo\node_modules\flowbite-react\lib\esm'
Did you mean 'index.js'?
BREAKING CHANGE: The request './theme-store' failed to resolve only because it was resolved as fully specified(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Steps to reproduce
yarn add flowbite-react@^0.5.0
tsx
Current behavior
I just read tutorial on https://www.flowbite-react.com/docs/components/tabs but Tabs is not default export
because of issue https://github.com/themesberg/flowbite-react/issues/1065 I cant update
flowbite-react
Expected behavior
Need working Tabs element in typescript