Adding TailwindCSS to a new Remix App

date
Apr 6, 2022
slug
remix-tailwindcss-start
status
Published
tags
Remix
TailwindCSS
summary
type
Post
It’s pretty easy to set up TailwindCSS in your Remix App if you follow the official TailwindCSS guide. These are the steps I followed to set it up.

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
 

© Nikit Singh 2020 - 2022