Install Tailwind CSS 3 in Remix with TypeScript

In this section we will see how to install tailwind css 3 in Remix run. For this section we will use remix js with typescript. There is two you can install & setup tailwind css in Remix first you can use remix with tailwind css start kit template or you can install remix with tailwind from scratch.

1. Install tailwind in Remix js with TypeScript Indie Stack

Run below command to install remix Indie Stack with tailwind css using typescript.

npx [email protected] --template remix-run/indie-stack tailwind-remix

or you can also use The Blues Stack, The Grunge Stack

Next, select TypeScript.

? TypeScript or JavaScript? (Use arrow keys)
> TypeScript 
 JavaScript 

write y for yes.

? TypeScript or JavaScript? TypeScript
? Do you want me to run `npm install`? (Y/n) 

move to project and run the serve

cd tailwind-remix
npm run dev

remix js with tailwind css

2. Install Remix with tailwind CSS From Scratch.

run below command to install remix project

npx create-remix@latest

Give project name and select basics.

? Where would you like to create your app? tailwind-remix
? What type of app do you want to create? (Use arrow keys)
> Just the basics 
 A pre-configured stack ready for production 

Chose deployment server.

deployment targets. (Use arrow keys)
> Remix App Server 
 Express Server 
 Architect (AWS Lambda)
 Fly.io
 Netlify
 Vercel
 Cloudflare Pages
(Move up and down to reveal more choices)

Next, select TypeScript

? TypeScript or JavaScript? (Use arrow keys)
> TypeScript
 JavaScript

write y for yes.

Do you want me to run `npm install`? (Y/n) 

Install Tailwind CSS in Remix Project

npm install -D tailwindcss concurrently
npx tailwindcss init

Add template path in tailwind.config.js

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Update your package.json scripts

package.json

{
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css"
  }
}

Create a ./styles/app.css file and add the @tailwind directives for each of Tailwind’s layers.

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Import the compiled ./app/styles/app.css file in your ./app/root.jsx file.

./app/root.jsx

import styles from "./styles/app.css"

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

routes/index.tsx

export default function Index() {
  return (
    <div className="flex justify-center items-center h-screen">
      <h1 className="text-3xl font-bold text-blue-600">
        Install Tailwind CSS in Remix
        </h1>
    </div>
  );
}

tailwind css with remix

run the server

npm run dev
# or
npm run build