Here’s how to include CSS in a page.

Simplest thing, 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 includes the CSS included in the file app/styles.css.

If links already exports something like in the case of the default root.jsx, you can append to the exported 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.

First install the tailwindcss package as a development dependency:

npm install -D tailwindcss

Next

npx tailwindcss init

This created a tailwind.config.js file in the project.

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Configure it to search for Tailwind classes in the correct location:

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

Now create a app/tailwind.css with:

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

Then in app/root.jsx import it and add it in the links export:

import styles from "./tailwind.css"

//...

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

//...

Now you can style your pages using Tailwind CSS classes:

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

Lessons in this unit: