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:
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
@mdv_io Keep us posted if you have any questions or need help along the way!!
Thanks for that guide, it worked beautifully.
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.
Many thanks for that tuto, worked like a charm and let me on board w/ Tailwind
Redwood now has official docs on how to integrate Tailwind Webpack Configuration | RedwoodJS Docs
There’s now a generator to setup Tailwind config for you!
yarn rw setup tailwind
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.
Thanks @mbush92! Good catch. I’ve edited the “solution” post to reflect this change.
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
TAILWIND_MODE=watch and expose it to web in your
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
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.
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!
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
change this line in the prettier.config.js to this:
then did a
yarn rw setup ui tailwindcss
which worked, but I noticed the prettier.config.js didn’t have:
so I did an update from 1.2 to 2.2:
yarn rw upgrade
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:
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.