Setup TailwindCSS, postcss and esbuild on Rails 7

• PostCSS

  33 27,134 9.3 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

  18 641 6.1 Ruby

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

  

  esbuild form JavaScript Bundling - (this post)

• SonarLint

  www.sonarlint.org

  sponsored

  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

  10 446 5.5 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

  144 52,187 9.9 Ruby

  Ruby on Rails

  

  I’m using Rails 7.0.4 and Ruby 3.0.4.

• importmap-rails

  7 809 7.5 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

  4 1,138 6.9 Ruby

  

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

• Foreman

  7 5,812 5.6 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 🚫

• InfluxDB

  www.influxdata.com

  sponsored

  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

  529 64,458 9.8 HTML

  A utility-first CSS framework for rapid UI development.

  

  TailwindCSS from CSS Bundling for Rails - (this post)

• chokidar

  8 9,654 4.8 JavaScript

  Minimal and efficient cross-platform file watching library

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

• esbuild

  104 34,430 9.9 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

  12 2,061 7.3 JavaScript

  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