TailwindCSS JIT without Webpacker

Public

A simple vanilla PostCSS build setup for TailwindCSS JIT

Used 53 times

• Created by

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 @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 @tailwindcss/forms so I'm not sure what the issue might be there :/