Gartner recognizes Netlify as a Visionary in 2024 Gartner® Magic Quadrant™ for Cloud Application Platforms >

Guides & Tutorials

How to use Tailwind CSS with Remix

Tailwind CSS has become a very popular option for styling applications. It uses atomic utility classes that are preconfigured with good defaults to get started easily. Remix is a JavaScript framework that aims to make creating a production ready application easier than ever. It uses React for the UI layer. Using Remix and Tailwind CSS together is a really powerful option to get your applications built quickly. To get started with Tailwind CSS in a fresh Remix application, we’ll run the following commands to create the Remix app or skip directly to the Tailwind setup. If you prefer video content, there is also a video tutorial.

Setting up Remix

  1. Run the command to start the CLI.

    npx create-remix@latest

  2. Name your project and select “Just the basics”.

Where would you like to create your app? rad-remix-app What type of app do you want to create? Just the basics.

  1. Select Netlify from the list of deployment targets.

Where do you want to deploy? A list of deploy targets, Netlify is highlighted

  1. Use either TypeScript or JavaScript, it’s your choice.

TypeScript of JavaScript? TypeScript is highlighted.

  1. Run npm install by hitting Y.

Do you want me to run npm install? (Y/n) Y

  1. Now your Remix project is set up. You can open it in your favorite code editor and start setting up Tailwind CSS.

Setting up Tailwind CSS

  1. Install the required packages for Tailwind.

    npm install -D tailwindcss postcss autoprefixer concurrently

  2. Run the command to initialize Tailwind, this will generate a tailwind.config.js file in the root of your project.

    npx tailwindcss init

  3. Open the newly created tailwind.config.js file and add the file paths to the content section.

    // tailwind.config.js
/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

  4. Replace the scripts in the package.json with the new Tailwind scripts. These add two scripts to generate the Tailwind CSS files and updates the build and dev scripts to use the new CSS scripts. The path to the CSS files can be configured as needed, but by default it puts the initial file in the root styles/app.css file and the generated output goes to app/styles/app.css.

    // package.json
{
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "tailwindcss -m -i ./styles/app.css -o app/styles/app.css",
    "dev": "concurrently \"npm run dev:css\" \"remix dev\"",
    "dev:css": "tailwindcss -w -i ./styles/app.css -o app/styles/app.css"
  }
}

  5. Where you set the path of your CSS to or the default location styles/app.css, create the initial location for the CSS. From the root of your project, run the following commands.

    mkdir styles
touch styles/app.css

  6. Add the @tailwind directives to the newly created app.css file.

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

  7. Run npm run dev to generate the output CSS file in app/styles/app.css.

  8. Import the generated CSS file into the app/root.tsx file.

    import styles from "./styles/app.css"

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

    One thing I ran into that I wanted to note here. Make sure your Remix app includes the <Links /> component from @remix-run/react inside your app/root.tsx file or the links will not be added.

    import { Links } from "@remix-run/react";
import styles from "./styles/app.css"
{/* ... */}
export function links() {
  return [{ rel: "stylesheet", href: styles }]
}
{/* ... */}
export default function Root() {
  return (
    <html>
      <head>
        <Links />
        {/* ... */}
      </head>
      {/* ... */}
    </html>
  );
}

  9. Now you are setup to start using Tailwind classes inside of your components. Try it in the app/routes/index.tsx file. Remove the inline style from the wrapper div element and add in the Tailwind classes, className="font-sans leading-5 m-4". And give the h1 some styles, className="text-3xl font-bold text-teal-600". Make sure your dev server is running, npm run dev, and open localhost://3000 to see your Tailwind styles applied.

    export default function Index() {
  return (
    <div className="font-sans leading-5 m-4">
      <h1 className="text-3xl font-bold text-teal-600">Welcome to Remix</h1>
      <ul>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/blog"
            rel="noreferrer"
          >
            15m Quickstart Blog Tutorial
          </a>
        </li>
        <li>
          <a
            target="_blank"
            href="https://remix.run/tutorials/jokes"
            rel="noreferrer"
          >
            Deep Dive Jokes App Tutorial
          </a>
        </li>
        <li>
          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
            Remix Docs
          </a>
        </li>
      </ul>
    </div>
  );
}

what is shown on the webpage of a starter remix app with the h1 Welcome to Remix styled with Tailwind CSS

K-Pop Stack

Another option with Tailwind CSS already preconfigured is the K-Pop Stack. Netlify’s templates team has created this stack that is already configured with Tailwind and it uses Supabase for the database.

Netlify's K-Pop Stack Homepage built with Remix, Supabase, and Tailwind CSS

Video Tutorial

Keep reading

Recent posts

How do the best dev and marketing teams work together?

Access the report