Tutorial: Add TailwindCSS to your Remix Project

TailwindCSS 3.0 Setup with Remix

This is a super quick tutorial to get TailwindCSS up and running in Remix! I wrote this when TailwindCSS3.0 was released on Remix V1.1.1

This tutorial assumes you have already created your Remix app using the npx create-remix@latest command, if not, do that first then follow these steps.

Open your terminal and let's install TailwindCSS

npm install -D tailwindcss

We also need Concurrently for running TailwindCSS in our dev environment.

npm install concurrently

Perfect, now lets initialize Tailwind to create our tailwind.config.js file

npx tailwindcss init

Let's update our tailwind.config.js file in our application for their purge function for any javascript .js or .jsx file.

module.exports = {
  purge: ["./app/**/*.{js,jsx}"], // Here we are going to tell Tailwind to use any javascript .js or .jsx file
  theme: { extend: {

  } },
  variants: {},
  plugins: [], 
};

Perfect, now we need to update our package.json file with scripts to generate our tailwind.css file.
Update your package.json scripts section to match this

  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -o ./app/tailwind.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -o ./app/tailwind.css --watch",
    "postinstall": "remix setup node",
    "start": "remix-serve build"
  },

Now when we run npm run dev it will generate a tailwind.css file in the root of our /app/ folder. We need to tell Remix that want to use this stylesheet. I'm going to set this up in our Root file so that TailwindCSS styles are imported to the entire site. Remix does this by importing our styles and using their links function to apply the stylesheet to the head of the HTML file.

Open your root.jsx file under (/app)
Add the following import statement and then update the exported links function:

import tailwindstyles from "./tailwind.css";

// https://remix.run/api/app#links
export let links = () => {
  return [
    { rel: "stylesheet", href: tailwindstyles }
  ];
};

Perfect, TailwindCSS is all setup in our Remix app!!!

Go forth and style beautiful apps and sites with amazing user experiences, because that's what Remix is all about!