How to Add CSS in Remix: Simple Guide with Examples

In Remix, you add CSS by importing stylesheets or CSS modules in your route or component files and linking them using the links export. You can also use inline styles or global styles by placing CSS files in the app/styles folder and referencing them properly.

Syntax

To add CSS in Remix, you create a CSS file and then export a links function from your route or component file. This function returns an array of objects with rel and href properties to link your CSS file.

Example parts explained:

• import styles from './styles.css': Imports the CSS file.
• export function links() { return [{ rel: 'stylesheet', href: styles }] }: Tells Remix to include the CSS file in the HTML.

javascript

import styles from './styles.css';

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

Example

This example shows how to add a CSS file to style a simple component in Remix. The CSS file sets the background color and text style.

javascript

// app/routes/index.jsx
import styles from '~/styles/index.css';

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

export default function Index() {
  return <div className="container">Hello, Remix with CSS!</div>;
}

// app/styles/index.css
.container {
  background-color: #f0f8ff;
  color: #333;
  font-family: Arial, sans-serif;
  padding: 20px;
  border-radius: 8px;
}

Output

A page showing a light blue background box with dark text saying "Hello, Remix with CSS!" styled with padding and rounded corners.

Common Pitfalls

Common mistakes when adding CSS in Remix include:

• Not exporting the links function, so the CSS file is not linked.
• Using a wrong path or forgetting the import statement for the CSS file.
• Trying to use CSS without the links export, which Remix requires to include stylesheets.
• Forgetting to restart the Remix dev server after adding new CSS files sometimes causes styles not to load.

javascript

/* Wrong way: CSS imported but no links export */
import styles from './styles.css';

export default function Component() {
  return <div className="box">No styles applied</div>;
}

/* Right way: Export links to include CSS */
import styles from './styles.css';

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

export default function Component() {
  return <div className="box">Styles applied</div>;
}

Quick Reference

Summary tips for adding CSS in Remix:

• Always import your CSS file in the route or component file.
• Export a links function returning an array with your stylesheet link.
• Place global CSS files in app/styles and import them where needed.
• Use CSS modules by naming files *.module.css and importing them as objects for scoped styles.
• Inline styles can be used with React style objects but are less common for full styling.

Key Takeaways

Import CSS files and export a links() function to include styles in Remix.

Use the links() export to tell Remix which CSS files to load for each route.

Place global CSS in app/styles and import them properly for reuse.

CSS modules provide scoped styles by importing as objects from *.module.css files.

Always check file paths and restart the dev server if styles don’t appear.