Create your project
Start by creating a new Remix project if you don’t have one set up already. The most common approach is to use Create Remix.
Terminalnpx create-remix@latest my-projectcd my-project
Install Tailwind CSS
Install
tailwindcss
via npm, and then run the init command to generate atailwind.config.ts
andpostcss.config.js
file.Terminalnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init --ts -p
Configure your template paths
Add the paths to all of your template files in your
tailwind.config.ts
file.tailwind.config.tsimport type { Config } from 'tailwindcss' export default { content: ['./app/**/*.{js,jsx,ts,tsx}'], theme: { extend: {}, }, plugins: [], } satisfies Config
Add the Tailwind directives to your CSS
Create a
./app/tailwind.css
file and add the@tailwind
directives for each of Tailwind’s layers.tailwind.css@tailwind base; @tailwind components; @tailwind utilities;
- root.tsx
import type { LinksFunction } from "@remix-run/node"; import stylesheet from "~/tailwind.css?url"; export const links: LinksFunction = () => [ { rel: "stylesheet", href: stylesheet }, ];
- Terminal
npm run dev
- _index.tsx
export default function Index() { return ( <h1 className="text-3xl font-bold underline"> Hello world! </h1> ) }