Remix: Tailwind CSS integration tutorial

07 January, 2022 — remix, react — 1 min read

Almost all the steps here are from official documentation on Remix Tailwind doc: https://remix.run/docs/en/v1/guides/styling#tailwind

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.

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

Steps

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: []
8};

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)

styles/tailwind.css

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

Update root.tsx to include tailwind.css

root.tsx

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

Refresh the page at this point to view Tailwind kick in

Style

index.tsx

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.

Remix: Tailwind CSS integration tutorial

Steps

Comments