How to use tailwind in remix

RemixHow-ToBeginner · 4 min read

How to Use Tailwind CSS in Remix: Setup and Example

To use Tailwind CSS in a Remix app, install Tailwind and its dependencies, create a Tailwind config file, and import Tailwind styles in your root CSS file. Then, include that CSS in your Remix root component to apply Tailwind classes throughout your app.

📐

Syntax

Here is the basic setup syntax to add Tailwind CSS to a Remix project:

npm install -D tailwindcss postcss autoprefixer - installs Tailwind and required tools.
npx tailwindcss init -p - creates tailwind.config.js and postcss.config.js.
Configure tailwind.config.js to scan Remix files for classes.
Create a CSS file (e.g., app/styles/tailwind.css) that imports Tailwind base, components, and utilities.
Import this CSS file in your root component (root.tsx or root.jsx).

bash,js,css

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

/* app/styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

// app/root.tsx or root.jsx
import styles from "./styles/tailwind.css";

export function links() {
  return [{ rel: "stylesheet", href: styles }];
}

💻

Example

This example shows a simple Remix root component using Tailwind CSS to style a header and a button.

tsx

// app/root.tsx
import type { LinksFunction } from "@remix-run/node";
import styles from "./styles/tailwind.css";

export const links: LinksFunction = () => [
  { rel: "stylesheet", href: styles },
];

export default function Root() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Remix with Tailwind</title>
      </head>
      <body className="bg-gray-100 flex items-center justify-center min-h-screen">
        <div className="text-center p-6 bg-white rounded shadow">
          <h1 className="text-3xl font-bold text-blue-600 mb-4">Welcome to Remix + Tailwind!</h1>
          <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
            Click Me
          </button>
        </div>
      </body>
    </html>
  );
}

Output

A centered white box on a light gray background with a blue heading and a blue button that changes shade on hover.

⚠️

Common Pitfalls

Common mistakes when using Tailwind in Remix include:

Not configuring tailwind.config.js content paths correctly, so Tailwind does not generate styles for your files.
Forgetting to import the Tailwind CSS file in the root component's links function.
Not restarting the Remix dev server after installing Tailwind or changing config files.
Using class names that Tailwind does not recognize because of typos or missing plugins.

// Wrong: tailwind.config.js missing app folder
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"], // wrong path for Remix
  theme: { extend: {} },
  plugins: [],
}

// Right: correct content path
module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: { extend: {} },
  plugins: [],
}

📊

Quick Reference

Summary tips for using Tailwind in Remix:

Install Tailwind and PostCSS dependencies.
Run npx tailwindcss init -p to create config files.
Set content in tailwind.config.js to ["./app/**/*.{js,jsx,ts,tsx}"].
Create a CSS file importing Tailwind directives and import it in root.tsx.
Restart Remix dev server after setup changes.

✅

Key Takeaways

Install Tailwind CSS and PostCSS, then initialize config files with npx.

Configure tailwind.config.js content paths to include your Remix app folder.

Import your Tailwind CSS file in the root component's links function.

Restart the Remix server after setup changes to apply Tailwind styles.

Use Tailwind utility classes directly in your Remix components for styling.