Tailwind optimize for production

[thomasvanholder]

The Tailwind docs specify that the CSS build can be minified to obtain the smallest possible CSS file.

You can minify your CSS by adding the --minify flag:

npx tailwindcss -o build.css --minify

If no preprocessor is being used (like sass), adding this flag would result in a smaller CSS file.

Unless rails has a css minifying step that I'm not aware of, we could add this to css-bundling-rails gem?

[nickjj]

I think out of the box with RAILS_ENV=production if you pre-compile your assets they will not be minified unless you've installed extra tools to make that work. You can test this by setting these values and also setting RAILS_SERVE_STATIC_FILES=true to let Rails serve your assets directly. They will be md5 tagged but not minified. This goes for both CSS (with Tailwind) and JS (esbuild).

It looks like maybe the build:css command defined in your package.json will get run as is. Perhaps a wrapper shell script could be created to situationally add --minify and other production flags based on the value of NODE_ENV and then this script would get referenced in package.json.

A proof of concept POSIX compliant script would be creating a file called tailwindcss with:

#!/usr/bin/env sh

TAILWINDCSS_PROD_ARGS=

if [ "${NODE_ENV}" = "production" ]; then
  TAILWINDCSS_PROD_ARGS="--minify"
fi

tailwindcss \
  -i ./app/assets/stylesheets/application.tailwind.css \
  -o ./app/assets/builds/application.css "${TAILWINDCSS_PROD_ARGS}"

And then you'd call it with "build:css": "./tailwindcss" in your package.json. If you wanted to keep your original flags in the packge.json file instead of the shell script you could do that too by passing all arguments to it and then only maybe appending the prod flags in the script.

It's an interesting design problem because on one hand we want the conventions of Rails. On the other hand if this were implemented at the Ruby level then the idea of using standard TailwindCSS / vendor config files goes out the window.

Looking forward to seeing what DHH comes up with as a unified plan for handling dev vs prod settings for both CSS and JS.

By the way there's also https://tailwindcss.com/docs/optimizing-for-production. If you're using PostCSS you can install cssnano and roll with something similar to that example without needing the script. Technically esbuild can also minify both JS and CSS too https://esbuild.github.io/api/#minify, but that would couple esbuild to CSS.

[dhh]

I think we should just pass --minify for both environments. It's fine to run minified in development too.

[marvdm]

Here is a workaround using Environment Variables:

1. Modify build:css in package.json:

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

2. Set the environment variable during asset precompile:

$ RAILS_ENV=production BUILD_CSS_ARGS="--minify" rails assets:precompile

[dhh]

Added --minify as the default instruction. IMO, no reason not to run this in development as well.

09d3bd6