How to: Add TailwindCSS to RedwoodJS

Hi folks - I am loving Redwood and wanted to pair it with the productivity of TailwindCSS. I wrote my findings on how to do it here:

14 Likes

Could you investigate on how to make a package for this that handles both installing and configure tailwind for redwood similar to vue-cli and ember addons?

Great call – let me dig in and try

1 Like

@mdv_io Keep us posted if you have any questions or need help along the way!!

Thanks for that guide, it worked beautifully.

1 Like

It’s not a package but I just followed the steps and created a repo with the default setup.

You could clone it. Do yarn install, and then use it as a base for any project.

1 Like

Many thanks for that tuto, worked like a charm and let me on board w/ Tailwind :slight_smile:

1 Like

Redwood now has official docs on how too integrate Tailwind https://redwoodjs.com/docs/webpack-configuration#adding-tailwindcss

5 Likes

Update

There’s now a generator to setup Tailwind config for you!

tl;dr: yarn rw setup tailwind

4 Likes

I’ve noticed that some class changes are not picked up when developing when purge is enabled (which is added by default). I had to disable purge in dev to make sure all the css is there.

Has anyone experienced this?

I see that util has been deprecated and replaced with setup so the new CLI command would be yarn rw setup tailwind. Just updating so folks in the future will know.

2 Likes

Thanks @mbush92! Good catch. I’ve edited the “solution” post to reflect this change.

1 Like

Adding a note here in case you come to this thread facing the bug in RW 0.39 where Tailwind’s JIT compiler (the default in v3) fails to refresh as you change your site. That issue is tracked on the Redwood github as issue #3792.

The temporary workaround until it is fixed is to set the env variable TAILWIND_MODE=watch and expose it to web in your redwood.toml.

3 Likes