Replace Bootstrap with Tailwind CSS#19
Merged
Merged
Conversation
Swap the Bootstrap + sassc asset pipeline for a Tailwind CSS build via the tailwindcss-rails gem (no Node toolchain), and reskin the UI to a dark theme shared with the Node and Python example apps. - drop the bootstrap and sassc-rails gems; add tailwindcss-rails - add config/tailwind.config.js (design tokens) and app/assets/stylesheets/application.tailwind.css (base + component layer), compiled to the committed app/assets/builds/tailwind.css - restyle layouts, Devise/registration/profile views, the home page and the webhooks table with Tailwind - reconfigure simple_form to emit Tailwind field/input/button classes and remove the Bootstrap simple_form wrappers - replace Bootstrap's JS (navbar/alert) with a small vanilla helper - document the styling setup in the README
Keep x86_64-linux, aarch64-linux and the generic ruby platform in the lock so CI and the Docker build can resolve the platform-specific tailwindcss-ruby gem.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
The app's UI was built on Bootstrap 5 (via the
bootstrapgem +sassc-rails). This PR replaces that with a Tailwind CSS build through thetailwindcss-railsgem — no Node toolchain required — and reskins the UI to the same dark theme used by the Castle Node and Python example apps, so the three demos now share one visual language.Changes
bootstrapandsassc-railsgems; addtailwindcss-rails. Tailwind source isapp/assets/stylesheets/application.tailwind.csswith design tokens inconfig/tailwind.config.js, compiled toapp/assets/builds/tailwind.css(committed sobin/rails serverworks without a build step;assets:precompilealso rebuilds it for Docker).simple_formto emit Tailwindfield/input/button classes and remove the 373-line Bootstrapsimple_formwrapper initializer.rails-ujs.Known limitations