Deprecated!

Remix has supported TailwindCSS built-in for a while now. Don't use this.

Remix Vite: https://remix.run/docs/en/main/future/vite#enable-tailwind-via-postcss
Classic compiler: https://remix.run/docs/en/main/styling/tailwind#tailwind

remix-tailwind

Use TailwindCSS with Remix without an extra build step!

Install

# npm
npm install remix-tailwind tailwindcss postcss

# pnpm
pnpm install remix-tailwind tailwindcss postcss

# yarn
yarn add remix-tailwind tailwindcss postcss

Usage

Generate a tailwind config:
```
npx tailwindcss init
```

Create a file at app/routes/tailwindcss.tsx or app/routes/tailwindcss.js:

import type { LoaderFunction } from "remix"
import { serveTailwindCss } from "remix-tailwind"

export const loader: LoaderFunction = () => serveTailwindCss()

Add a link to this route in app/root.tsx:

export const links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: "/tailwindcss" }]
}

And that's it! Get styling. 🖌

Custom CSS file

remix-tailwind uses a default CSS file, but you can provide a path to your own. The path can be absolute, or relative to the current working directory.

// app/routes/tailwindcss.tsx
import type { LoaderFunction } from "remix"
import { serveTailwindCss } from "remix-tailwind"

export const loader: LoaderFunction = () => serveTailwindCss("app/tailwind.css")

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

html,
body {
  @apply bg-slate-900 text-slate-100;
}

How it works

Reads your CSS and config when requesting the route
Processes tailwind CSS via PostCSS and returns it as a response
Remix takes that CSS and applies it to the page (via a link tag, that ol' thing)