Our great sponsors
-
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.
-
esbuild form JavaScript Bundling - (this post)
-
InfluxDB
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.
-
TailwindCSS from CSS Bundling for Rails - (this post)
-
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.
-
Preconfigured TailwindCSS from TailwindCSS-rails ready to use out of the box, pass --css tailwind as an option.✅
-
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 identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
TailwindCSS from CSS Bundling for Rails - (this post)
-
First, we need to install chokidar to enable watching and automatically refreshing our files.
-
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.
-
CableReady and StimulusReflex are installed for even more, server-powered frontend interactivity and reactive page updates.