Material Tailwind with Remix

Learn how to setup and install @material-tailwind/react with Remix.



First you need to create a new project using remix, for more details check the Remix Official Documentation

npx create-remix@latest

Then you need to install Tailwind CSS since @material-tailwind/react is working with Tailwind CSS classes and you need to have Tailwind CSS installed on your project. Check Tailwind CSS Installation for remix on Tailwind CSS Documentation


Using NPM

Install @material-tailwind/react as a dependency using NPM by running the following command:

npm i @material-tailwind/react

Using Yarn

Install @material-tailwind/react as a dependency using Yarn by running the following command:

yarn add @material-tailwind/react

Using PNPM

Install @material-tailwind/react as a dependency using PNPM by running the following command:

pnpm i @material-tailwind/react

TailwindCSS Configurations

Once you install @material-tailwind/react you need to wrap your tailwind css configurations with the withMT() function coming from @material-tailwind/react/utils.

const withMT = require("@material-tailwind/react/utils/withMT");
 
module.exports = withMT({
  content: ["./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
});

TailwindCSS Configurations with MonoRepo

If you're using monorepo in your project you need to add the theme and components paths to your tailwind.config.js.

const withMT = require("@material-tailwind/react/utils/withMT");
 
module.exports = withMT({
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});

Theme Provider

@material-tailwind/react comes with a theme provider that set's the default theme/styles for components or to provide your own theme/styles to your components. You need to wrap your entire application with the ThemeProvider coming from @material-tailwind/react.

On the app/entry.client put the code bellow.

import { RemixBrowser } from "@remix-run/react";
import { hydrate } from "react-dom";
import { ThemeProvider } from "@material-tailwind/react";
 
hydrate(
  <ThemeProvider>
    <RemixBrowser />
  </ThemeProvider>,
  document
);

Example

Now you're good to go and use @material-tailwind/react in your project.

import { Button } from "@material-tailwind/react";
 
export default function Example() {
  return <Button>Button</Button>;
}