Using TailwindCSS with Remix

Let's see how to do the setup of TailwindCSS for a project using Remix.

Install Tailwind

The first thing we need to do is to install Tailwind in our project

npm install tailwindcss

Create the configuration file

Now we can create a configuration file, let's create config/tailwind.js file in the root of our project and add the following code:

module.exports = {
  mode: "jit", // this will enable Tailwind JIT compiler to make the build faster
  purge: ["./app/**/*.{ts,tsx}"], // Here we are going to tell Tailwind to use any .ts or .tsx file to purge the CSS
  darkMode: "media", // Use media queries for dark mode, customize it as you want
  theme: { extend: {} }, // customize the theme however you want here
  variants: {}, // activate any variant you want here
  plugins: [], // add any plugin you need here
};

Import the styles

Now, we need to import the CSS of Tailwind it in our application, since Tailwind it's a global CSS we can import it directly in our app/root.tsx file. The file should have this inside:

import type { LinksFunction } from "remix";
import tailwindUrl from "./styles/tailwind.css";

export let links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: tailwindUrl }];
};

// There rest of your root route here

We are importing a CSS file in app/styles/tailwind.css, this file doesn't exists yet, we are going to create it.

Create the CSS in development

Now let's create the file we are going to import. In our package.json we can add the following script:

tailwindcss --output ./app/styles/tailwind.css --config ./config/tailwind.js --watch

This will tell the Tailwind CLI to output a CSS file in the path we are using in our root route, it will also use the configuration we created in config/tailwind.js so it will enable JIT and purge the CSS and it will run in watch mode. Because we are running it in watch mode we can now go to any .ts or .tsx file in our app directory and Tailwind will recompile only to add or remove the classes we need.

Create the CSS for production

Once we are ready to build our application for production we want to create minified CSS and don't have a running process, so we can go again to our package.json and add another script there.

tailwindcss --output ./app/styles/tailwind.css --config ./config/tailwind.js --minify

The script is really similar, we only changed --watch with --minify, by doing this we process will run and finish so it will not keep running and the CSS in app/styles/tailwind.css will be minified and ready for production.

That's it, there's nothing really specific of Remix here, only the way we import the CSS and add the link and the setup take only a few minutes.