TailwindCSS JIT without Webpacker
A simple vanilla PostCSS build setup for TailwindCSS JIT
Used 46 times
D
Dom Christie
Usage
You'll need to have a recent version of Node.js. (This template assumes that the Rails project does not have a
package.json
with "build" and "start" fields.)Once the template has installed, run the following alongside
rails s
:npm start
This will monitor your templates and build a minimal Tailwind file for consumption by the asset pipeline.
For deployment to Heroku, check out this guide.
Run this command in your Rails app directory in the terminal:
rails app:template LOCATION="https://railsbytes.com/script/Vwysmv"
Template Source
Review the code before running this template on your machine.
run "npm init -y"
run "npm install -D tailwindcss@latest postcss@latest autoprefixer@latest"
run "npx tailwindcss init"
run "touch app/assets/stylesheets/tailwind.css"
inject_into_file "app/assets/stylesheets/tailwind.css" do <<~EOF
@tailwind base;
@tailwind components;
@tailwind utilities;
EOF
end
inject_into_file "tailwind.config.js", after: "module.exports = {" do <<-MODE.chomp
mode: 'jit',
MODE
end
gsub_file "tailwind.config.js", /^\s+purge:\s\[\],/, <<-PURGE.chomp
purge: [
'./app/**/*.html.erb',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
],
PURGE
inject_into_file "package.json", after: "\"scripts\": {" do <<-SCRIPTS.chomp
"build": "tailwindcss -i ./app/assets/stylesheets/tailwind.css -o ./app/assets/stylesheets/tailwind-build.css",
"start": "tailwindcss -i ./app/assets/stylesheets/tailwind.css -o ./app/assets/stylesheets/tailwind-build.css --watch",
SCRIPTS
end
inject_into_file "app/assets/stylesheets/application.css", after: "require_tree ." do <<-STYLES.chomp
*= stub tailwind
*= require tailwind-build
STYLES
end
Comments
Julian Rubisch
Hi Dom!
Love this and use it quite extensively... however, today I added
And now JIT is no longer working. It does compile the styles, but only after restarting
Love this and use it quite extensively... however, today I added
@tailwindcss/forms
, after which npm required me to install lilconfig
and tmp
("module not found").And now JIT is no longer working. It does compile the styles, but only after restarting
npm start.
I looked for similar issues on the issue tracker but couldn't find any. Do you know what could be wrong by any chance?
Julian Rubisch
Addendum: seems like updating all
postcss postcss-cli tailwindcss autoprefixer
to latest
has removed some incompatibility!
Dom Christie
Hey Julian! Glad to hear you're enjoying this (before the issues :)
The Tailwind v2.2 upgrade broke some compatibility when building via the default postcss-cli script. This also confused me for a while but is noted here: https://tailwindcss.com/docs/just-in-time-mode#styles-don-t-update-when-saving-content-files
I have updated the RailsByte to use the new Tailwind CLI, which seems to fix the JIT updating issue. I've not used
The Tailwind v2.2 upgrade broke some compatibility when building via the default postcss-cli script. This also confused me for a while but is noted here: https://tailwindcss.com/docs/just-in-time-mode#styles-don-t-update-when-saving-content-files
I have updated the RailsByte to use the new Tailwind CLI, which seems to fix the JIT updating issue. I've not used
@tailwindcss/forms
so I'm not sure what the issue might be there :/