Adding TailwindCSS to a new Remix App

date

Apr 6, 2022

slug

remix-tailwindcss-start

status

Published

Initial Setup

Create your new Remix app or ignore this step if you already have a Remix app created beforehand.

npx create-remix@latest my-remix-app
cd my-remix-app

Installing and configuring TailwindCSS

Install the following packages and then run the npx tailwindcss init -p command to create the tailwind.config.js and postcss.config.js files.

npm install -D tailwindcss postcss autoprefixer concurrently
npx tailwindcss init -p

Here we installed the concurrently package so that in the next step we can concurrently run multiple commands.

Setting up script commands in `package.json`

Add the following to your scripts object in the package.json file.

{
  "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",
  }
}

Setting up the styles in the project

Create a ./styles/app.css file and add the following @tailwind directives to it.

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

Now change the tailwind.config.js file like this.

module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now import the ./app/styles/app.css file in your ./app/root.tsx file

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

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

And add some TailwindCSS styles to your index.tsx file.

export default function Index() {
  return (
    <h1 className="bg-red-300 p-4 text-red-800">
      TailwindCSS in Remix
    </h1>
  )
}

Running the app

Now the final step is to run the app

npm run dev