Use with Remix - Flowbite React

Create project#

Run the following command to create a new Remix project:

npx create-remix@latest

Setup Tailwind CSS#

1. Install tailwindcss and its peer dependencies:

npm i -D tailwindcss

2. Generate tailwind.config.ts file:

npx tailwindcss init --ts

3. Add the paths to all of your template files in your tailwind.config.ts file:

import type { Config } from 'tailwindcss';

export default {
  content: ['./app/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

4. Create a ./app/tailwind.css file and add the @tailwind directives for each of Tailwind's layers:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Import the newly-created ./app/tailwind.css file in your ./app/root.tsx file:

import stylesheet from '~/tailwind.css';

export const links: LinksFunction = () => [
  // ...
  { rel: 'stylesheet', href: stylesheet },
];

Install Flowbite React#

1. Run the following command to install flowbite-react:

npm i flowbite-react

2. Add the Flowbite plugin to tailwind.config.ts and include content from flowbite-react:

import flowbite from 'flowbite/plugin';
import type { Config } from 'tailwindcss';

export default {
  content: [
    // ...
    'node_modules/flowbite-react/lib/esm/**/*.js',
  ],
  plugins: [
    // ...
    flowbite,
  ],
} satisfies Config;

Try it out#

Now that you have successfully installed Flowbite React you can start using the components from the library.

import { Button } from 'flowbite-react';

export default function Index() {
  return <Button>Click me</Button>;
}