Skip to content
Chandan Kumar

Remix: Tailwind CSS integration tutorial

remix, react1 min read

Almost all the steps here are from official documentation on Remix Tailwind doc:

To configure tailwind css we need to install the dependency and configure the layout to include it. Using it within Remix app is dead easy. Note that this is not a css-in-js solution and AFAIK, it does not matter much. There are pros and cons.

Briefly we need to do the following to get it working.

  1. Install tailwind
  2. Create tailwind config
  3. Update package.json scripts
  4. Create or update css file to use Tailwind CSS


Install tailwind and relevant dependency

1npm add -D concurrently tailwindcss postcss

Create and update tailwind config file

1touch tailwind.config.js
1module.exports = {
2 content: ["./app/**/*.{ts,tsx}"],
3 theme: {
4 extend: {}
5 },
6 variants: {},
7 plugins: []

Update package.json with necessary scripts to build CSS and start the dev server

1"build": "npm run build:css && remix build",
2 "build:css": "tailwindcss -i ./styles/tailwind.css -o ./app/tailwind.css --minify",
3 "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
4 "dev:css": "tailwindcss -i ./styles/tailwind.css -o ./app/tailwind.css --watch",

Create CSS file and update reference to tailwind

1mkdir styles
2touch styles/tailwind.css

Update CSS (adding components is optional)

1@tailwind base;
2@tailwind components;
3@tailwind utilities;
5@layer components {
6 .btn {
7 @apply bg-slate-50;
8 }

Update root.tsx to include tailwind.css

1// ...
2import styles from "./tailwind.css";
4export function links() {
5 return [{ rel: "stylesheet", href: styles }];

Refresh the page at this point to view Tailwind kick in


1<header className="bg-cyan-100">
2 <div className="flex justify-between container mx-auto pt-5 pb-5">
3 <h1 className="text-3xl">Firebase Authentication</h1>
4 <nav className="">
5 <FirebaseLogin />
6 </nav>
7 </div>
8 </header>

Consider additing app/tailwind.css into .gitignore it's a generated file

Here on you can do your thing with Tailwind as you would with Tailwind in general.


Copyleft. WTH
Theme by LekoArts