Installation
Setting up Tailwind CSS in a React Router project.
Start by creating a new React Router project if you don’t have one set up already. The most common approach is to use Create React Router.
npx create-react-router@latest my-projectcd my-project
Install @tailwindcss/vite
and its peer dependencies via npm.
npm install tailwindcss @tailwindcss/vite
Add the @tailwindcss/vite
plugin to your Vite configuration.
import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import tsconfigPaths from "vite-tsconfig-paths";import tailwindcss from "@tailwindcss/vite";export default defineConfig({ plugins: [ tailwindcss(), reactRouter(), tsconfigPaths(), ],});
Add an @import
to ./app/app.css
that imports Tailwind CSS.
@import "tailwindcss";
Run your build process with npm run dev
.
npm run dev
Start using Tailwind’s utility classes to style your content.
export default function Home() { return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> )}