How to Use Tailwind CSS with Remix
Tags: tailwindcss, remix, css
Published: 2022-08-09 22:57:52

---
title: How to Use Tailwind CSS with Remix
published: true
description: All you need to know about styling your Remix application with Tailwind CSS in this step by step guide. 
tags: tailwindcss, remix, css, tailwind
cover_image: https://cdn.sanity.io/images/o0o2tn5x/production/879a09b95121c54a9991860aec72ae5091651e9c-2400x1260.png
canonical_url: https://netlify.com/blog/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](remix.run) and [Tailwind CSS](https://tailwindcss.com/) 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](#setting-up-tailwind-css).

## Setting up Remix

1. Run the command to start the CLI.
    
    ```bash
    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.](https://cdn.sanity.io/images/o0o2tn5x/production/9312748b62fb3e4214a558bea0cd08a5e534095c-1134x118.png?w=450)
    
3. Select Netlify from the list of deployment targets.
    
![Where do you want to deploy? A list of deploy targets, Netlify is highlighted](https://cdn.sanity.io/images/o0o2tn5x/production/01ccb94a159ac07607f0123498fd854b57ae1d9f-1396x528.png?w=450)

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

![TypeScript of JavaScript? TypeScript is highlighted.](https://cdn.sanity.io/images/o0o2tn5x/production/fe004289a4c06c91c8df6f222b228ead81615a57-860x178.png?w=450)
    
5. Run `npm install` by hitting Y.
    
![Do you want me to run `npm install`? (Y/n) Y](https://cdn.sanity.io/images/o0o2tn5x/production/50491be6c0194c4e223bc13a17d6ba13b17ae967-928x70.png?w=450)
    
6. 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.
    
    ```bash
    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.
    
    ```bash
    npx tailwindcss init
    ```
    
3. Open the newly created `tailwind.config.js` file and add the file paths to the content section.
    
    ```jsx
    // 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`.
    
    ```json
    // 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.
    
    ```bash
    mkdir styles
    touch styles/app.css
    ```
    
6. Add the `@tailwind` directives to the newly created `app.css` file.
    
    ```css
    @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.
    
    ```jsx
    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.
    > 
    
    ```jsx
    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](http://localhost:3000/) to see your Tailwind styles applied.
    
    ```jsx
    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](https://cdn.sanity.io/images/o0o2tn5x/production/588aff48eacf8d9d9400b99b4601e9ce0208a96e-576x246.png?w=450)

## K-Pop Stack
Another option with Tailwind CSS already preconfigured is the [K-Pop Stack](https://www.netlify.com/blog/deploy-your-remix-supabase-app-today/). 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](https://cdn.sanity.io/images/o0o2tn5x/production/6bef9bba58f6357a13e094b1bcb20e876e595dc2-2952x1734.png?w=450)](https://kpop-stack.netlify.app/)