How to: Add TailwindCSS to RedwoodJS

mdv_io · April 9, 2020, 3:49pm

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:

guledali · April 9, 2020, 8:54pm

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?

mdv_io · April 9, 2020, 9:20pm

Great call – let me dig in and try

thedavid · April 9, 2020, 9:23pm

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

mfosker · May 2, 2020, 7:52am

Thanks for that guide, it worked beautifully.

gastongarcia · June 6, 2020, 10:20pm

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.

noire.munich · June 12, 2020, 1:23pm

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

Tobbe · August 21, 2020, 12:23pm

Redwood now has official docs on how to integrate Tailwind Webpack Configuration | RedwoodJS Docs

thedavid · August 25, 2020, 10:05pm

Update

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

tl;dr: yarn rw setup tailwind

viperfx · November 6, 2020, 1:40pm

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?

mbush92 · November 19, 2020, 3:22pm

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.

thedavid · November 20, 2020, 4:42am

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

zackdotcomputer · December 13, 2021, 9:55am

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.

timschonborn · June 1, 2022, 9:37am

Adding another note for people who find this on google and wonder why the command isn’t working, it’s been changed to: yarn rw setup ui tailwind

adamloving · August 4, 2022, 11:07pm

Hmm… yarn rw setup ui tailwindcss is failing for me at the moment. I’ve got a nearly empty new project (created this week, no models yet, just a few simple pages).

Node 16.16, RedwoodJS 2.2.0.

The error looks like:

$ yarn rw setup ui tailwindcss
yarn run v1.22.17
❯ Installing project-wide packages...
    ✖ Install prettier-plugin-tailwindcss
      → info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
    Installing web workspace-wide packages...
    Configuring PostCSS...
    Initializing Tailwind CSS...
    Adding import to index.css...
    Adding recommended VS Code extensions...
    Adding tailwind config entry in prettier...
    Adding tailwind prettier plugin...
Command failed with exit code 1: yarn add -D prettier-plugin-tailwindcss
error Running this command will add the dependency to the workspace root rather than the workspace itself, which might not be what you want - if you really meant it, make it explicit by running this command again with the -W flag (or --ignore-workspace-root-check).
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
error Command failed with exit code 1.

tried cd'ing into web before running the command, to no avail.

ajcwebdev · August 5, 2022, 3:32am

I just created a fresh project and everything worked as expected, example repo here. Node and Redwood versions are identical but I’m on Yarn 3.2.1, maybe that is the issue?

adamloving · August 5, 2022, 4:48pm

Good eye! I followed these instructions to upgrade yarn (which took me up to yarn 3.2.2), and that made yarn rw setup ui tailwind work again. Thank you!

kingstarfly · August 10, 2022, 7:28am

I’m facing problems after adding tailwind. Running yarn rw setup ui tailwind, everything works well. However, when I try to generate an SDL with yarn rw g sdl User, an error pops up.

Cannot create property 'context' on string 'Error: Cannot find module 'C:\Users\xx\Desktop\Workspace\test-project\webconfig    ailwind.config.js'
Require stack:

OS: Windows 10
Node: v16.15.1
Yarn: 3.2.2

reachej · August 12, 2022, 12:17am

change this line in the prettier.config.js to this:

tailwindConfig: ‘.\\web\\config\\tailwind.config.js’,

reachej · August 12, 2022, 12:18am

I cloned

then did a
yarn rw setup ui tailwindcss
which worked, but I noticed the prettier.config.js didn’t have:

tailwindConfig: ‘.\\web\\config\\tailwind.config.js’

so I did an update from 1.2 to 2.2:

yarn rw upgrade

then again:

yarn rw setup ui tailwindcss --force (can’t remember if I used force switch or not)

but I noticed the prettier.config.js still didn’t have:

tailwindConfig: ‘.\\web\\config\\tailwind.config.js’,
plugins: [require(‘prettier-plugin-tailwindcss’)],

so I added these lines manually.

Mentioning it because I’d think the setup script would make the same changes on the same redwood version, but that didn’t turn out to be the case.