How to install Remix with Flowbite and Tailwind CSS

Remix is a new and increasingly popular full-stack web framework based on React that allows you to build websites with quicker page load by leveraging distributed systems and using the native Web Fetch API to load content from the server.

The Remix framework is being used by hundreds of thousands of developers and large companies one of which is Shopify which actually acquired it on the October 31st, 2022.

Follow the next steps in this guide to learn how to create a new Remix project and install and setup Tailwind CSS together with the UI components from Flowbite.

Requirements

Before getting started make sure you that have Node.js and NPM installed on your local machine to be able to install the required packages including Remix, Tailwind CSS and Flowbite.

Create a new project

1. Run the following command in your terminal to set up a new Remix project:

npx create-remix@latest

After using the Create Remix CLI command you will be prompted to select some options such as choosing between TypeScript or JavaScript, using different types of servers, and using NPM or Yarn - you can choose whatever best suits your needs.

1. Run the following command to start a local server:

npm run dev

This will make local development accessible via the browser on http://localhost:3000.

If you want to build the project you can run npm run build and that will create a production-ready version of the application that you can deploy on a server.

We strongly encourage you to go through the Remix Blog Tutorial to learn the basics of this framework if it's the first time you're using it.

Install Tailwind CSS

Now that you have a Remix project configured you can proceed by installing Tailwind CSS:

1. Install Tailwind CSS via NPM:

npm install -D tailwindcss concurrently

1. Create a new tailwind.config.js by running the following command:

npx tailwindcss init

1. Configure the template paths inside the Tailwind CSS configuration file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

This will ensure that the classes from Tailwind CSS will be parsed for compilation.

1. Create a new ./css/app.css file relative to the root folder of your project and import the Tailwind directives:

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

1. In your ./app/root.jsx import the stylesheet and export is as a link:

import CSS from "./css/app.css"

export function links() {
  return [{ rel: "stylesheet", href: CSS }]
}

1. Update your package.json file by making sure that Tailwind CSS will also be compiled:

{
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./css/app.css -o app/css/app.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -w -i ./css/app.css -o app/css/app.css"
  }
}

You can verify the Tailwind CSS installation by editing the ./app/routes/index.jsx file:

export default function Index() {
  return (
    <div>
      <h1>Welcome to Remix</h1>
      <ul>
        <li>
          <a
            target="_blank"
            href="https://flowbite.com/getting-started/remix/"
            rel="noreferrer"
            className="text-lg text-blue-600 hover:underline"
          >
            Flowbite + Remix + Tailwind CSS Tutorial
          </a>
        </li>
      </ul>
    </div>
  );
}

If you're running a local server with the npm run dev command, then the link show be colored blue and you're now ready to use Tailwind CSS classes inside your Remix application.

Install Flowbite React

Flowbite React is a free and open-source library of UI components based on the Flowbite design system that allows you to plug-and-play interactive and responsive React components such as modals, navbars, dropdowns, and more directly inside your Remix and Tailwind CSS configured project.

1. The first step is to install both Flowbite and Flowbite React via NPM:

npm install flowbite flowbite-react --save

1. Require Flowbite as a plugin inside the tailwind.config.js file and configure the template paths:

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./node_modules/flowbite-react/**/*.js"
  ],
  plugins: [
    // other plugins...
    require("flowbite/plugin")
  ],
  theme: {},
};

That's all that you need to do to leverage the UI component collection from the core Flowbite and Flowbite React library.

Flowbite components

The full collection of React components can be browsed either on the GitHub repository or the official Flowbite React website and you can copy-paste the examples directly into your application.

Here's an example of how you can use the Button and Tooltip component:

import { Tooltip, Button } from "flowbite-react";

export default function Index() {
  return (
    <div>
      <h1>Welcome to Remix</h1>
      <Tooltip content="Flowbite is awesome">
      <Button>
        Hover to find out
      </Button>
    </Tooltip>
    </div>
  );
}

Another example would be using the Dropdown component:

import { Dropdown } from "flowbite-react";

export default function Index() {
  return (
    <div>
      <h1>Welcome to Remix</h1>
      <Dropdown label="Dropdown button">
        <Dropdown.Item>
            Dashboard
        </Dropdown.Item>
        <Dropdown.Item>
            Settings
        </Dropdown.Item>
        <Dropdown.Item>
            Earnings
        </Dropdown.Item>
        <Dropdown.Item>
            Sign out
        </Dropdown.Item>
    </Dropdown>
    </div>
  );
}

And finally, here's an example using the Navbar component:

import { Navbar } from "flowbite-react";

export default function Index() {
  return (
    <div>
      <h1>Welcome to Remix</h1>
      <Navbar
        fluid={true}
        rounded={true}
        >
        <Navbar.Brand href="https://flowbite.com/">
            <img
            src="https://flowbite.com/docs/images/logo.svg"
            className="mr-3 h-6 sm:h-9"
            alt="Flowbite Logo"
            />
            <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
            Flowbite
            </span>
        </Navbar.Brand>
        <Navbar.Toggle />
        <Navbar.Collapse>
            <Navbar.Link
            href="/navbars"
            active={true}
            >
            Home
            </Navbar.Link>
            <Navbar.Link href="/navbars">
            About
            </Navbar.Link>
            <Navbar.Link href="/navbars">
            Services
            </Navbar.Link>
            <Navbar.Link href="/navbars">
            Pricing
            </Navbar.Link>
            <Navbar.Link href="/navbars">
            Contact
            </Navbar.Link>
        </Navbar.Collapse>
        </Navbar>
    </div>
  );
}

Remix starter project

The awesome Flowbite community has created a free and open-source Remix starter project that you can use pre-configured with Tailwind CSS and the UI components from Flowbite.

Comments

[Al - Naucode]

Great article, you got my follow, keep writing!

[AudreySantiago]

This is actually a very informative article, Very helpful advice in this particular post! iplwin online