Add config to install ruby_ui with import maps and tailwind 4 #232
Conversation
karinevieira
force-pushed
the
karinevieira/upgrade_tailwind_4
branch
from
94f2225 to
bd5eb12
Compare
karinevieira
changed the title
karinevieira
force-pushed
the
karinevieira/upgrade_tailwind_4
branch
from
bd5eb12 to
da0070d
Compare
karinevieira
force-pushed
the
karinevieira/upgrade_tailwind_4
branch
from
d9ba15e to
26995d3
Compare
| @plugin "@tailwindcss/forms"; | ||
| @plugin "@tailwindcss/typography"; |
There was a problem hiding this comment.
Tailwind 4 brought container query support into core so we don't need the @tailwindcss/container-queries plugin anymore.
There was a problem hiding this comment.
Thanks for this! I think there's one errant line but then it will probably be good to go! I tried this locally since I'm working on spinning up a new project with latest & greatest everything and this has helped me immensely! I removed that one line and (while I'm still just barely getting started), at least rails tailwindcss:watch works now!
| @@ -0,0 +1,153 @@ | |||
| @import "tailwindcss"; | |||
| @import "../../../vendor/javascript/tw-animate-css.js"; | |||
There was a problem hiding this comment.
What is this line? I think something from your project might have snuck in here...?
There was a problem hiding this comment.
Or maybe this is somehow related to the tailwind animate plugin? But when I ran importmap pin tailwindcss-animate it did not add that file to my vendor dir:
importmap pin tailwindcss-animate
Pinning "tailwindcss-animate" to vendor/javascript/tailwindcss-animate.js via download from https://ga.jspm.io/npm:[email protected]/index.js
Pinning "tailwindcss/plugin" to vendor/javascript/tailwindcss/plugin.js via download from https://ga.jspm.io/npm:[email protected]/dist/plugin.js
Weirdly the output seems to indicate that it saves the tailwind plugin file at vendor/javascript/tailwindcss/plugin.js but instead it added vendor/javascript/tailwindcss--plugin.js
There was a problem hiding this comment.
What is this line? I think something from your project might have snuck in here...?
That's right @sdhull, exactly!
The tailwindcss-animate library does not support Tailwind 4, so as an alternative, I am using tw-animate-css. However, when installing it with importmaps, this file is added to my project: vendor/javascript/tw-animate-css.js.
To successfully start the application using bin/dev, I had to modify the path to make it work properly. Otherwise, I get the following error:
Error: Can't resolve 'tw-animate-css' in 'my_project_path/app/assets/tailwind'
|
Thanks 🚀 |
Following Seth's initiative, I'm adding a CSS template to enable the installation of
ruby_uiin Rails applications that use import maps and thetailwind-cssgem with Tailwind 4.