Install and configure Remix

Create a new Remix Project

Terminal

pnpm create remix@latest my-remix-app
# Or
npx create-remix@latest my-remix-app
# Or
yarn create remix@latest my-remix-app
# Or
bun create-remix@latest my-remix-app

You'll be asked:

Choose a deployment target → Select Remix App Server
Install dependencies → Select Yes

Start the development server

Terminal

cd my-remix-app
 
pnpm dev
# Or
npm run dev
# Or
bun dev
# Or
yarn dev

If your project doesn’t have Tailwind CSS, install it, otherwise skip this step.

Install and Configure Tailwind CSS

Install Tailwind CSS

Terminal

pnpm install -D tailwindcss postcss autoprefixer
# Or
npm install -D tailwindcss postcss autoprefixer
# Or
bun add -D tailwindcss postcss autoprefixer
# Or
yarn add -D tailwindcss postcss autoprefixer

Initialize Tailwind CSS

Terminal

pnpm dlx tailwindcss init --ts -p
# Or
npx tailwindcss init --ts -p
# Or
yarn tailwindcss init --ts -p
# Or
bunx --bun tailwindcss init --ts -p

Configure Tailwind CSS `tailwind.config.ts`

tailwind.config.ts

import type { Config } from "tailwindcss";
 
export default {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

Add the Tailwind directives to your CSS `app/tailwind.css`

tailwind.css

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

Add Tailwind to `app/root.tsx`

root.tsx

import "./tailwind.css";
 
export default function App({ children }) {
  return <>{children}</>;
}

Start the development server

Terminal

pnpm dev
# Or
npm run dev
# Or
bun dev
# Or
yarn dev

Start using Tailwind CSS

_index.tsx

export default function Index() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

If your project doesn’t have Framer motion, install it, otherwise skip this step.

Install Framer motion

Terminal

pnpm add motion
# Or
npm install motion
# Or
bun add motion
# Or
yarn add motion

Features can now be used in your project via the `motion/react`.

page.tsx

import { motion } from "motion/react";
 
export default function Home() {
  return <motion.div>Hello world!</motion.div>;
}

Remix

On this page