Rails CSS Bundling for Tailwind Yarn package.json build:css command

css:build for package.json for tailwind css in rails 7

me@jaykilleen.com wrote this almost 3 years ago and it was last updated almost 3 years ago.


← Back to the Posts

I was upgrading from rails 6.1 to rails 7 and wanted to install tailwind css using CSS Bundinglin. The install steps fail to add the build:css command to the package.json and I (for the life of me) couldn't find this command when Googling. I probably could've checked the github library source code. Instead I spun up a new rails application to see how the generator did it.

Walla! "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"

{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.0.1",
    "@hotwired/turbo-rails": "^7.1.0",
    "autoprefixer": "^10.4.2",
    "esbuild": "^0.14.11",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.12"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"
  }
}