Setup TailwindCSS, postcss and esbuild on Rails 7

• PostCSS

  86 28,254 8.5 TypeScript

  Transforming styles with JS plugins

  

As we write more features we would need to organize our css files, write additional styles or wrap any tailwind components up using tailwinds @apply helper. Currently, we can’t import other css files into the main application.tailwind.css file because our node-powered TailwindCSS is provided by cssbundling-rails, which by default doesn’t allow it. Luckily we can fix it, thanks to postcss.

• jsbundling-rails

  38 801 6.5 Ruby

  Bundle and transpile JavaScript in Rails with esbuild, rollup.js, or Webpack.

  

esbuild form JavaScript Bundling - (this post)

• InfluxDB

  www.influxdata.com featured

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

• cssbundling-rails

  27 558 6.4 Ruby

  Bundle and process CSS in Rails with Tailwind, PostCSS, and Sass via Node.js.

  

TailwindCSS from CSS Bundling for Rails - (this post)

• Ruby on Rails

  478 55,048 10.0 Ruby

  Ruby on Rails

  

I’m using Rails 7.0.4 and Ruby 3.0.4.

• importmap-rails

  26 1,016 7.8 Ruby

  Use ESM with importmap to manage modern JavaScript in Rails without transpiling or bundling.

  

While I prefer using importmaps-rails to jsbundling-rails, I found many developers and companies want to have the ability to use JS libraries as they used with Webpack. Old habit I think.

• tailwindcss-rails

  20 1,363 8.7 Ruby
  

Preconfigured TailwindCSS from TailwindCSS-rails ready to use out of the box, pass --css tailwind as an option.✅

• Foreman

  15 5,981 5.9 Ruby

  Manage Procfile-based applications

We ran our app via bin/dev. You can find the div file inside ./bin/dev folder. It is a ruby wrapper over the process manager forman which manages Procfile-based applications. Rails automatically install foreman gem but it doesn’t bundle it because forman recommends NOT to do 🚫

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

• Tailwind CSS

  1,291 79,207 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

TailwindCSS from CSS Bundling for Rails - (this post)

• chokidar

  23 10,615 4.7 JavaScript

  Minimal and efficient cross-platform file watching library

First, we need to install chokidar to enable watching and automatically refreshing our files.

• esbuild

  328 37,440 9.5 Go

  An extremely fast bundler for the web

Now, it’s time to write a costume configuration for esbuild. It will replace the default one which ships with jsbundling-rails gem. But, do we need to do so for rsbuild?! you might ask. The answer ‘sometimes’ is yes.

• stimulus_reflex

  45 2,222 8.0 Ruby

  Build reactive applications with the Rails tooling you already know and love.

  

CableReady and StimulusReflex are installed for even more, server-powered frontend interactivity and reactive page updates.

Suggest a related project