Why Remix supports multiple styling approaches

Introduction

Remix lets you choose different ways to style your app so you can pick what feels easiest and works best for your project.

You want to use simple CSS files for quick styling.

You prefer CSS-in-JS for dynamic styles based on app state.

You need to use Tailwind CSS for utility-first styling.

You want to keep styles scoped to components to avoid conflicts.

You want to mix global styles with component styles easily.

Syntax

Remix

/* Example of importing CSS in Remix */
import stylesUrl from './styles.css?url';

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

You add styles by exporting a links function that returns stylesheets.

You can use plain CSS, Sass, CSS modules, or CSS-in-JS libraries.

Examples

This adds a global CSS file to your Remix app.

Remix

/* Importing global CSS */
import globalStyles from './global.css?url';

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

This scopes styles to the Button component to avoid conflicts.

Remix

/* Using CSS modules */
import styles from './Button.module.css';
import stylesUrl from './Button.module.css?url';

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

export function Button() {
  return <button className={styles.primary}>Click me</button>;
}

Tailwind uses utility classes directly in your markup for fast styling.

Remix

/* Using Tailwind CSS */
// Tailwind classes are added directly in JSX
export function Header() {
  return <h1 className="text-3xl font-bold text-blue-600">Welcome</h1>;
}

Sample Program

This example shows how to add a global CSS file and use classes in your component.

Remix

import stylesUrl from './styles.css?url';

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

export default function Home() {
  return (
    <main>
      <h1 className="title">Hello Remix</h1>
      <p className="description">Styling your app your way!</p>
    </main>
  );
}

Important Notes

Remix does not force one styling method, so you can mix approaches as needed.

Using the links export is key to adding stylesheets in Remix.

Component-scoped styles help avoid style conflicts in bigger apps.

Summary

Remix supports many styling methods to fit your preferences.

You add styles by exporting a links function or using CSS-in-JS.

This flexibility helps you build apps that look great and are easy to maintain.