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:

13 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

2 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