Adding Tailwind CSS to Remix

Adding Tailwind CSS to Remix

TailwindCSS is an incredibly popular CSS framework, so it's natural that a lot of devs looking into Remix will want to use Tailwind. This guide will get you up and running with Tailwind inside Remix in just a few minutes. If you're new to Tailwind or aren't comfortable with it, check out our Beginner Tailwind course!

For the sake of completeness, we'll go through creating a new Remix project and adding Tailwind to Remix. Pop open your terminal and run the following command:

npx create-remix@latest

What this does is creates a new Remix project using the latest version of Remix. You will then go through a few prompts in the terminal:

  • Name your project
  • Pick a deployment target (for this guide, I selected Remix App Server, but it won't really make a difference)
  • Select whether to use TypeScript or Javascript (I selected TypeScript, but again, this won't make a difference for Tailwind)
  • Choose whether to run npm install or not (I did)

You should now be able to run cd <your-remix-project>, where you'll see the code for the example application.

We're already almost there - in your project folder, run

npm install --save-dev concurrently tailwindcss

Note: concurrently is an npm package for running multiple commands in parallel - unfortunately, this is necessary for better dev experience when using Tailwind with Remix as it lets us avoid running commands in two different terminal windows for watching both Tailwind and Remix.

Then, run npx tailwindcss init to generate your tailwind.config.js file.

Open up your generated tailwind.config.js - this is the file that controls all your global configuration for Tailwind in your project. It will initially look something like this:

javascript
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

We need to add mode and update the purge properties, like the following:

javascript
module.exports = {
  mode: "jit"
  purge: ["./app/**/*.{ts,tsx}"],
  ...
}

Note: If you selected JavaScript when initializing your Remix project, you should set the purge line to be ["./app/*/.{js,jsx}"]

Now, we also need to update our package.json scripts to be the following:

json
"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",
    ...
},

This is where the other package we installed - concurrently - comes into play to make our lives easier. When we run npm run dev now, concurrently will fire both our remix dev script as well as our dev:css script, so that we don't have to have multiple terminal windows open for Tailwind, Remix, and so on. Once you run npm run dev, you should see output in your terminal similar to the following:

โžœ  tailwind-test npm run dev

> remix-app-template@ dev /Users/srob/Documents/code/tailwind-test
> concurrently "npm run dev:css" "remix dev"

[0]
[0] > remix-app-template@ dev:css /Users/srob/Documents/code/tailwind-test
[0] > tailwindcss -o ./app/tailwind.css --watch
[0]
[1] Watching Remix app in development mode...
[1] ๐Ÿ’ฟ Built in 515ms
[1] Remix App Server started at <http://localhost:3000>
[0] Done in 5088ms.
[1] ๐Ÿ’ฟ File created: app/tailwind.css
[1] ๐Ÿ’ฟ Rebuilding...
[1] ๐Ÿ’ฟ Rebuilt in 106ms

Great! One more step and we're good to go.

In order for our app to actually be able to use Tailwind, we have to import the generated stylesheet (which is ./app/tailwind.css from the terminal output above).

Open app/root.tsx, and find the [links function](https://remix.run/docs/en/v1/api/remix#meta-links-scripts) and CSS imports (which should be somewhere near the top of the file) which should look something like this initially:

javascript
import globalStylesUrl from "~/styles/global.css";
import darkStylesUrl from "~/styles/dark.css";

export let links: LinksFunction = () => {
  return [
    { rel: "stylesheet", href: globalStylesUrl },
    {
      rel: "stylesheet",
      href: darkStylesUrl,
      media: "(prefers-color-scheme: dark)",
    },
  ];
};

Import your tailwind.css file and add it to the links function, like so:

javascript
...
import tailwindStyles from "./tailwind.css"

export let links: LinksFunction = () => {
  return [
    { rel: "stylesheet", href: globalStylesUrl },
    {
      rel: "stylesheet",
      href: darkStylesUrl,
      media: "(prefers-color-scheme: dark)"
    },
    { rel: "stylesheet", href: tailwindStyles}
  ];
};

Note: You'll likely want to remove the other linked stylesheets in your links function, as well as their respective imports. I kept them in these examples simply for consistency.

After you save, you're done! You can now use all that Tailwind has to offer in any component you write in Remix - there's no need to import it in any other components since all CSS imports in root.tsx are considered global.

Thanks for reading, and enjoy using Remix with Tailwind ๐ŸŽ‰. Also, make sure to check out the wonderful Tailwind docs and Remix docs!

Want to improve your coding and design skills?

I'm continually researching the best practices and tools for coding.
Join 50,000+ developers looking to make cool stuff.

We value your privacy. 1-click unsubscribe.

Samuel Robertson

Samuel Robertson

Samuel is a Senior Software Engineer at System1 by day, and a dev and aspiring content creator at Better Dev by night. Powered by coffee and preworkout.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)