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
  • PopRuby - Clothing and Accessories for Ruby Developers
  • WorkOS - The modern API for authentication & user identity.
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • Onboard AI - ChatGPT with full context of any GitHub repo.
  • 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)

  • PopRuby

    PopRuby: Clothing and Accessories for Ruby Developers. Fashion meets Ruby! Shop our fun Ruby-inspired apparel and accessories designed to celebrate the joy and diversity of the Ruby community.

  • 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 🚫

  • WorkOS

    The modern API for authentication & user identity. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  • 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