Styling Remix using Tailwind and PostCSS
How to style a Remix app using Tailwind and PostCSS
Saturday, December 4, 2021
Table of Contents
TL;DR: Source and Demo
Here's a live demo
Link to the source code
Link to step by step commits
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.
OR if you prefer
Add scripts to
Add Script for CSS generation
yarnif you prefer to use
I don't want to commit those generated CSS files to the repo, so I'll be adding them to
Add Script for cleaning up build files
Running the scripts
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
If you are not a fan of multiple terminals, use
concurrently to run
remix dev in parallel
Tailwind and App styles presets
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
Styling a component
Use Tailwind, as usual; add Tailwind's class names added inside the
If you're wondering where the above file came from, that is from my last blog post.
Here are some plugins that you can use to get a better experience using Tailwind and PostCSS in VSCode.
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.