Styling Remix using Tailwind and PostCSS

How to style a Remix app using Tailwind and PostCSS

Saturday, December 4, 2021

TL;DR: Source and Demo

Here's a live demo

Link to the source code

Link to step by step commits

Introduction

In my last blog post, I discussed how to style a Remix app using Vanilla CSS. This blog will show how to integrate Tailwind and PostCSS into our Remix app.

Dependencies

• autoprefixer
• postcss
• postcss-cli
• postcss-import
• tailwindcss
• cssnano

Installation

OR if you prefer yarn

Add scripts to package.json

Add Script for CSS generation

Replace npm run with yarn if you prefer to use yarn

I don't want to commit those generated CSS files to the repo, so I'll be adding them to .gitignore

Add Script for cleaning up build files

Running the scripts

• Development

Run npm run css:watch in one terminal and remix dev in another

DISCLAIMER: Don't expect it will work immediately. We still need to configure a few things with Tailwind and PostCSS.

OPTIONAL: Run multiple scripts in a single command

• Production

If you are not a fan of multiple terminals, use concurrently to run css:watch and remix dev in parallel

Tailwind and App styles presets

Tailwind styles

We need to explicitly declare the features we want to use in our CSS. Here's a reference of what you can use.

App CSS presets

Some CSS defaults I prefer

PostCSS and Tailwind configuration

PostCSS Config File

Tailwind Config File

Integrating styles in Remix Code

Add a reference of the generated CSS files using links in app/root.tsx

Styling a component

Use Tailwind, as usual; add Tailwind's class names added inside the className prop.

If you're wondering where the above file came from, that is from my last blog post.

VSCode Plugins

Here are some plugins that you can use to get a better experience using Tailwind and PostCSS in VSCode.

• PostCSS Language Support
• Tailwind CSS IntelliSense

Conclusion

Integrating Tailwind and PostCSS in Remix is straightforward as we don't need to hack into the framework to make them work. We quickly achieved an extendable and customizable CSS generation boilerplate by adding a few configurations.