How to Add Stylesheet in Remix: Simple Guide

In Remix, add stylesheets by exporting a links function from your route module that returns an array of objects with rel and href. Use rel: 'stylesheet' and the path to your CSS file in href to include the stylesheet in your page.

Syntax

To add a stylesheet in Remix, export a links function from your route file. This function returns an array of objects where each object defines a link tag's attributes.

• rel: The relationship attribute, usually stylesheet for CSS files.
• href: The path to the CSS file you want to include.

javascript

export function links() {
  return [
    { rel: 'stylesheet', href: '/styles/global.css' }
  ];
}

Example

This example shows how to add a global stylesheet to a Remix route. The links function returns the stylesheet link, and the CSS file styles the page background and text color.

typescript

import { LinksFunction } from '@remix-run/node';

export const links: LinksFunction = () => {
  return [
    { rel: 'stylesheet', href: '/styles/global.css' }
  ];
};

export default function Index() {
  return (
    <main>
      <h1>Welcome to Remix with Styles!</h1>
      <p>This page uses an external stylesheet.</p>
    </main>
  );
}

/* File: public/styles/global.css */
body {
  background-color: #f0f8ff;
  color: #333;
  font-family: Arial, sans-serif;
  padding: 2rem;
}

Output

A webpage with a light blue background and dark text showing a heading and paragraph styled by the external CSS.

Common Pitfalls

Common mistakes when adding stylesheets in Remix include:

• Not exporting the links function, so the stylesheet is never linked.
• Using incorrect href paths that do not point to the public folder or static assets.
• Forgetting to place CSS files in the public directory or not configuring the build to serve them.
• Trying to import CSS directly in route files without proper loaders (Remix uses the links export for stylesheets).

javascript

/* Wrong way: importing CSS directly (won't work by default) */
// import styles from './styles/global.css'; // This is not supported in Remix by default

/* Right way: export links function */
export function links() {
  return [{ rel: 'stylesheet', href: '/styles/global.css' }];
}

Quick Reference

Property	Description	Example
rel	Defines the relationship of the linked file	'stylesheet'
href	Path to the CSS file relative to the public folder	'/styles/global.css'
links function	Exports an array of link objects to include stylesheets	export function links() { return [{ rel: 'stylesheet', href: '/styles/global.css' }]; }

Key Takeaways

Always export a links() function returning stylesheet links to add CSS in Remix.

Place CSS files in the public folder and reference them with href starting with '/'.

Do not import CSS directly in route files; use the links export instead.

Check your href paths carefully to avoid broken stylesheet links.

Remix automatically injects the returned links into the HTML head for you.