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:

17 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 to integrate Tailwind Webpack Configuration | RedwoodJS Docs

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

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

3 Likes

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.

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?

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!

1 Like

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

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

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

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.