Setup TailwindCSS, postcss and esbuild on Rails 7

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SonarLint - Clean code begins in your IDE with SonarLint
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • SaaSHub - Software Alternatives and Reviews
  • PostCSS

    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

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

    esbuild form JavaScript Bundling - (this post)

  • SonarLint

    Clean code begins in your IDE with SonarLint. Up your coding game and discover issues early. SonarLint is a free plugin that helps you find & fix bugs and security issues from the moment you start writing code. Install from your favorite IDE marketplace today.

  • cssbundling-rails

    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

    Ruby on Rails

    I’m using Rails 7.0.4 and Ruby 3.0.4.

  • importmap-rails

    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

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

  • Foreman

    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 🚫

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

    TailwindCSS from CSS Bundling for Rails - (this post)

  • chokidar

    Minimal and efficient cross-platform file watching library

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

  • esbuild

    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

    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.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts