Here’s how to include CSS in a page.

The simplest approach: you can use the “React way” by using the style tag with an object:

<p style={{ textAlign: 'center' }}>test</p>

This works without any other change.

The next level is loading a CSS file.

You can import it from app/root.jsx, making it available across the entire site:

import styles from "./styles.css"

//...

export const links = () => [
  { rel: "stylesheet", href: styles },
]

//...

This loads the CSS from the file app/styles.css.

If the links function already returns something (as in the default root.jsx), you can append to that array:

import styles from "./styles.css"

//...

export const links = () => [
  ...(cssBundleHref
    ? [
        { rel: 'stylesheet', href: cssBundleHref },
        { rel: 'stylesheet', href: styles },
      ]
    : []),
]

//...

You can use a lot of different CSS setups including CSS Modules, PostCSS, SCSS, and more. The official docs go into that kind of setup.

One thing that I always want in my projects is Tailwind CSS, so let’s see how to enable that with Tailwind v4.

1) Install Tailwind and the Vite plugin

npm install -D tailwindcss @tailwindcss/vite

2) Add the plugin to vite.config.ts

import { defineConfig } from 'vite'
import { vitePlugin as remix } from '@remix-run/dev'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [remix(), tailwindcss()],
})

3) Create app/tailwind.css

@import "tailwindcss";

4) Load the stylesheet from app/root.jsx

import tailwindStylesheet from "./tailwind.css?url"

//...

export const links = () => [
  { rel: 'stylesheet', href: tailwindStylesheet }
]

//...

Now you can style your pages using Tailwind CSS classes:

<h1 className='text-center'>Welcome to Remix</h1>

If you are using Remix without Vite, follow the Remix docs for your build setup and then add the @import "tailwindcss"; line to your main CSS file.

Lessons in this unit:

0:	Introduction
1:	Create your first Remix app
2:	The root route
3:	File based routing
4:	Linking your pages
5:	▶︎ Styling with CSS and Tailwind
6:	Create a navigation
7:	Dynamic routes and nested routes
8:	Connecting a database
9:	Data mutations using forms and actions
10:	Introduction to Remix