Replace Bootstrap with Tailwind CSS

Gemfile

@@ -5,7 +5,6 @@ source 'https://rubygems.org'
 ruby file: '.ruby-version'
 
 gem 'bootsnap', require: false
-gem 'bootstrap', '~> 5.3'
 gem 'castle-rb', '~> 8.1'
 gem 'devise', '~> 5.0'
 gem 'dotenv-rails'
@@ -15,10 +14,10 @@ gem 'omniauth-twitter'
 gem 'puma', '~> 6.4'
 gem 'rails', '~> 8.1.3'
 gem 'responders'
-gem 'sassc-rails'
 gem 'simple_form'
 gem 'sprockets-rails'
 gem 'sqlite3', '~> 2.1'
+gem 'tailwindcss-rails', '~> 3.3'
 
 group :development, :test do
   gem 'byebug'

Gemfile.lock

@@ -83,8 +83,6 @@ GEM
     bindex (0.8.1)
     bootsnap (1.24.6)
       msgpack (~> 1.2)
-    bootstrap (5.3.8)
-      popper_js (>= 2.11.8, < 3)
     builder (3.3.0)
     byebug (13.0.0)
       reline (>= 0.6.0)
@@ -116,8 +114,6 @@ GEM
       railties (>= 6.1.0)
     faker (3.8.0)
       i18n (>= 1.8.11, < 2)
-    ffi (1.17.4)
-    ffi (1.17.4-arm64-darwin)
     globalid (1.3.0)
       activesupport (>= 6.1)
     hamlit (4.0.0)
@@ -170,8 +166,12 @@ GEM
     nokogiri (1.19.3)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
+    nokogiri (1.19.3-aarch64-linux-gnu)
+      racc (~> 1.4)
     nokogiri (1.19.3-arm64-darwin)
       racc (~> 1.4)
+    nokogiri (1.19.3-x86_64-linux-gnu)
+      racc (~> 1.4)
     oauth (1.1.5)
       auth-sanitizer (~> 0.1, >= 0.1.3)
       base64 (~> 0.1)
@@ -199,7 +199,6 @@ GEM
       omniauth-oauth (~> 1.1)
       rack
     orm_adapter (0.5.0)
-    popper_js (2.11.8)
     pp (0.6.3)
       prettyprint
     prettyprint (0.2.0)
@@ -283,14 +282,6 @@ GEM
       rspec-mocks (~> 3.13)
       rspec-support (~> 3.13)
     rspec-support (3.13.7)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
     securerandom (0.4.1)
     simple_form (5.4.1)
       actionpack (>= 7.0)
@@ -314,8 +305,17 @@ GEM
       sprockets (>= 3.0.0)
     sqlite3 (2.9.4)
       mini_portile2 (~> 2.8.0)
+    sqlite3 (2.9.4-aarch64-linux-gnu)
     sqlite3 (2.9.4-arm64-darwin)
+    sqlite3 (2.9.4-x86_64-linux-gnu)
     stringio (3.2.0)
+    tailwindcss-rails (3.3.2)
+      railties (>= 7.0.0)
+      tailwindcss-ruby (~> 3.0)
+    tailwindcss-ruby (3.4.19)
+    tailwindcss-ruby (3.4.19-aarch64-linux)
+    tailwindcss-ruby (3.4.19-arm64-darwin)
+    tailwindcss-ruby (3.4.19-x86_64-linux)
     temple (0.10.4)
     thor (1.5.0)
     tilt (2.7.0)
@@ -340,12 +340,13 @@ GEM
     zeitwerk (2.8.2)
 
 PLATFORMS
+  aarch64-linux
   arm64-darwin-25
   ruby
+  x86_64-linux
 
 DEPENDENCIES
   bootsnap
-  bootstrap (~> 5.3)
   byebug
   castle-rb (~> 8.1)
   devise (~> 5.0)
@@ -360,11 +361,11 @@ DEPENDENCIES
   rails-controller-testing
   responders
   rspec-rails
-  sassc-rails
   simple_form
   simplecov
   sprockets-rails
   sqlite3 (~> 2.1)
+  tailwindcss-rails (~> 3.3)
   web-console
 
 RUBY VERSION

README.md

@@ -17,6 +17,12 @@ SDK (8.x).
 - **browser SDK** – the `@castleio/castle-js` SDK mints a request token in the
   browser that is submitted with the login form and forwarded to the API.
 
+## Screenshots
+
+| Home | Login |
+| ---- | ----- |
+| ![Home](docs/screenshots/home.png) | ![Login](docs/screenshots/login.png) |
+
 ## Prerequisites
 
 You'll need a Castle account. If you don't have one, start a free trial at
@@ -55,6 +61,25 @@ bin/rails server
 `bin/setup` runs the dependency install, file copying and database setup in one
 step.
 
+## Styling (Tailwind CSS)
+
+The UI is styled with [Tailwind CSS](https://tailwindcss.com) via the
+[`tailwindcss-rails`](https://github.com/rails/tailwindcss-rails) gem (no Node
+toolchain required). The source is `app/assets/stylesheets/application.tailwind.css`
+with design tokens in `config/tailwind.config.js`; it compiles to
+`app/assets/builds/tailwind.css`, which is committed so `bin/rails server` works
+without a build step.
+
+If you change the views or the Tailwind source, regenerate the stylesheet:
+
+```bash
+bin/rails tailwindcss:build      # one-off build
+bin/rails tailwindcss:watch      # rebuild on change during development
+```
+
+`assets:precompile` (used by the Docker build) runs `tailwindcss:build`
+automatically.
+
 ## Configuration
 
 All configuration is read from environment variables (loaded from `.env` in

app/assets/config/manifest.js

@@ -1,3 +1,3 @@
 //= link_tree ../images
 //= link_directory ../javascripts .js
-//= link_directory ../stylesheets .css
+//= link_tree ../builds

app/assets/javascripts/application.js

@@ -11,6 +11,4 @@
 // about supported directives.
 //
 //= require rails-ujs
-//= require popper
-//= require bootstrap
 //= require_tree .

app/assets/javascripts/ui.js

@@ -0,0 +1,20 @@
+// Minimal UI behaviour that previously came from Bootstrap's JS bundle:
+// the responsive navbar toggle and dismissible flash messages.
+(function () {
+  document.addEventListener("DOMContentLoaded", function () {
+    var toggler = document.querySelector("[data-nav-toggle]");
+    var menu = document.querySelector("[data-nav-menu]");
+    if (toggler && menu) {
+      toggler.addEventListener("click", function () {
+        menu.classList.toggle("hidden");
+      });
+    }
+
+    document.querySelectorAll("[data-dismiss-alert]").forEach(function (btn) {
+      btn.addEventListener("click", function () {
+        var alert = btn.closest(".alert");
+        if (alert) alert.remove();
+      });
+    });
+  });
+})();