Default theme doesn't work

[Aleksandern]

Hello.

The default theme doesn't work but TailwindCSS classes work.
Input is not rounded, buttons have white background etc..

tailwind.config.js

const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
const { join } = require('path');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    join(
      __dirname,
      '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}',
    ),
    ...createGlobPatternsForDependencies(__dirname),
    './node_modules/flowbite/**/*.js',
    './node_modules/flowbite-react/**/*.js',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin'),
  ],
};

postcss.config.js

const { join } = require('path');

// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
// option from your application's configuration (i.e. project.json).
//
// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

    "flowbite": "^1.8.1",
    "flowbite-react": "^0.6.4",
    "next": "13.4.1",

Did I miss something?
Thank you.

[Aleksandern]

If I add my custom theme then classes are applying:

export const flowbiteTheme: CustomFlowbiteTheme = {
  button: {
    color: {
      warning: 'bg-[red]',
    },
  },
};

But the default theme doesn't work even if I import it manually:

import {
  theme,
} from 'flowbite-react';

  <Flowbite
    theme={{
      theme: theme,
    }}
  >
{children}
</Flowbite>

[Aleksandern]

I found the problem. I have a monorepo and I use https://nx.dev.
So the content:

  content: [
    './node_modules/flowbite/**/*.js',
    './node_modules/flowbite-react/**/*.js',
  ],

must be like this:

    '../../node_modules/flowbite/**/*.js',
    '../../node_modules/flowbite-react/**/*.js',
  ],

or I may need to create a symlink node_modules in my Next project.

[AlighSports]

I am also using nx, I found out that you can assign base path for flowbite.conten() from flowbite-react/tailwind

[trocoli96]

Hi! I'm just using Nx too and it seems that this is not working for me too. This is my tailwind.config.js

module.exports = {
 content: [
      '../../node_modules/flowbite/**/*.*',
      '../../node_modules/flowbite-react/lib/**/*.*',
      join(
        __dirname,
        '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
      ),
      ...createGlobPatternsForDependencies(__dirname),
  ],
  darkMode: "media", // darkMode: 'class',
  theme: {/*theme*/},
  plugins: [require("@tailwindcss/typography"), require("flowbite/plugin")],
};

Even adding this it seems the default theme from flowbite is not being taken and only applying my theme in theme key and in

Any ideas what could be happening?

[trocoli96]

Finally found what the issue is, it seems tailwind does not take the paths from the tailwind config file, it takes it from the root file so it was not resolving ../../node_modules, so finally the content looks like this

  content: [
      join(
        __dirname,
        '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
      ),
      ...createGlobPatternsForDependencies(__dirname),
    'node_modules/flowbite/**/*.{js,jsx,ts,tsx}',
    'node_modules/flowbite-react/lib/**/*.{js,jsx,ts,tsx}',
  ],

[SutuSebastian]

Moving here #1558.