Modernize examples app with Tailwind

Author: vipulnsward

Gemfile

@@ -16,6 +16,7 @@ gem "propshaft"
 
 gem "turbo-rails"
 gem "jsbundling-rails"
+gem "tailwindcss-rails", "~> 4.4"
 
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem "jbuilder"
@@ -65,8 +66,8 @@ end
 gem "tzinfo-data", platforms: %i[windows mswin jruby]
 
 # Uploadcare-rails provides unified API interface to Uploadcare API
-gem "uploadcare-rails", github: "uploadcare/uploadcare-rails", branch: "5-0-stable"
-gem "uploadcare-ruby", github: "uploadcare/uploadcare-ruby", branch: "5-0-stable"
+gem "uploadcare-rails", "5.0.0.rc1"
+gem "uploadcare-ruby", "5.0.0.rc1"
 
 # Use MongoDB for the database, with Mongoid as the ODM
 gem "mongoid", "< 10"

Gemfile.lock

@@ -1,24 +1,3 @@
-GIT
-  remote: https://github.com/uploadcare/uploadcare-rails.git
-  revision: 01c73621db5d138f597e5400308f8646209c0aea
-  branch: 5-0-stable
-  specs:
-    uploadcare-rails (5.0.0.rc1)
-      rails (>= 7.2)
-      uploadcare-ruby (>= 5.0.0.rc1)
-
-GIT
-  remote: https://github.com/uploadcare/uploadcare-ruby.git
-  revision: 181cdb32a3c7535e6f94eaed4b9939297c1a9d81
-  branch: 5-0-stable
-  specs:
-    uploadcare-ruby (5.0.0.rc1)
-      addressable (~> 2.8)
-      faraday (~> 2.14)
-      faraday-multipart (~> 1.0)
-      mime-types (~> 3.7)
-      zeitwerk (~> 2.7)
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -207,7 +186,7 @@ GEM
     multipart-post (2.4.1)
     net-http (0.9.1)
       uri (>= 0.11.1)
-    net-imap (0.6.3)
+    net-imap (0.6.4)
       date
       net-protocol
     net-pop (0.1.2)
@@ -368,6 +347,13 @@ GEM
     sexp_processor (4.17.5)
     spring (4.4.2)
     stringio (3.2.0)
+    tailwindcss-rails (4.4.0)
+      railties (>= 7.0.0)
+      tailwindcss-ruby (~> 4.0)
+    tailwindcss-ruby (4.2.2-aarch64-linux-gnu)
+    tailwindcss-ruby (4.2.2-arm64-darwin)
+    tailwindcss-ruby (4.2.2-x86_64-darwin)
+    tailwindcss-ruby (4.2.2-x86_64-linux-gnu)
     thor (1.5.0)
     timeout (0.6.1)
     tsort (0.2.0)
@@ -379,6 +365,15 @@ GEM
     unicode-display_width (3.2.0)
       unicode-emoji (~> 4.1)
     unicode-emoji (4.2.0)
+    uploadcare-rails (5.0.0.rc1)
+      rails (>= 7.2)
+      uploadcare-ruby (>= 5.0.0.rc1)
+    uploadcare-ruby (5.0.0.rc1)
+      addressable (~> 2.8)
+      faraday (~> 2.14)
+      faraday-multipart (~> 1.0)
+      mime-types (~> 3.7)
+      zeitwerk (~> 2.7)
     uri (1.1.1)
     useragent (0.16.11)
     web-console (4.3.0)
@@ -425,10 +420,11 @@ DEPENDENCIES
   rspec-rails
   rubocop-rails-omakase
   spring
+  tailwindcss-rails (~> 4.4)
   turbo-rails
   tzinfo-data
-  uploadcare-rails!
-  uploadcare-ruby!
+  uploadcare-rails (= 5.0.0.rc1)
+  uploadcare-ruby (= 5.0.0.rc1)
   web-console
 
 RUBY VERSION

Procfile.dev

@@ -1,2 +1,3 @@
 web: mise exec -- ruby bin/rails server
 js: mise exec -- pnpm build --watch
+css: mise exec -- ruby bin/rails tailwindcss:watch

README.md

@@ -1,7 +1,7 @@
 # Uploadcare Rails Example app
 
 This example project demonstrates the uploadcare-rails capabilities.
-The app is pinned to the `5-0-stable` branches of `uploadcare/uploadcare-rails` and `uploadcare/uploadcare-ruby`, targets Ruby `>= 4.0.0`, runs Rails `8.1.x`, and uses pnpm-managed Hotwire assets.
+The app uses the `5.0.0.rc1` prerelease gems for `uploadcare-rails` and `uploadcare-ruby`, targets Ruby `>= 4.0.0`, runs Rails `8.1.x`, and uses Hotwire with Tailwind CSS.
 
 * [Installation](#installation)
   * [Requirements](#requirements)
@@ -51,6 +51,7 @@ $ cd uploadcare-rails-example
 $ mise exec -- bundle install
 $ mise exec -- pnpm install
 $ mise exec -- pnpm build
+$ mise exec -- ruby bin/rails tailwindcss:build
 $ mise exec -- ruby bin/rails db:prepare
 $ mise exec -- ruby bin/rails db:migrate
 ```
@@ -68,7 +69,7 @@ Start the server and the pnpm watcher together:
 $ ./bin/dev
 ```
 
-`bin/dev` runs Rails plus `pnpm build --watch`, so Hotwire assets stay current while you work.
+`bin/dev` runs Rails plus `pnpm build --watch` and `tailwindcss:watch`, so Hotwire and Tailwind assets stay current while you work.
 
 ![Application is available](./references/application-up-in-browser.png)
 
@@ -177,7 +178,7 @@ The example app uploads files in three ways: local file upload via the Upload AP
 ---
 **NOTE**
 
-The app now uses the current `5-0-stable` branch APIs. The Post and Comment forms render the v1 Uploadcare File Uploader Web Components directly with `<uc-form-input>`, `<uc-config>`, `<uc-file-uploader-regular>`, and `<uc-upload-ctx-provider>`. Group uploads submit a single Uploadcare group URL that matches `has_uploadcare_files`. Manual API actions in controllers use `Uploadcare::Rails.client`, and the conversion examples use the raw REST parity layer where exact path control is needed.
+The app now uses the current `5.0.0.rc1` prerelease APIs. The Post and Comment forms render the v1 Uploadcare File Uploader Web Components directly with `<uc-form-input>`, `<uc-config>`, `<uc-file-uploader-regular>`, and `<uc-upload-ctx-provider>`. Group uploads submit a single Uploadcare group URL that matches `has_uploadcare_files`. Manual API actions in controllers use `Uploadcare::Rails.client`, and the conversion examples use the raw REST parity layer where exact path control is needed.
 
 ---
 

app/assets/tailwind/application.css

@@ -0,0 +1,236 @@
+@import "tailwindcss";
+
+@layer base {
+  body {
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  h1 {
+    @apply mb-2 text-2xl font-semibold tracking-normal text-slate-950;
+  }
+
+  h2 {
+    @apply text-xl font-semibold tracking-normal text-slate-950;
+  }
+
+  h3 {
+    @apply text-lg font-semibold tracking-normal text-slate-950;
+  }
+
+  h4 {
+    @apply text-base font-semibold tracking-normal text-slate-950;
+  }
+
+  a {
+    @apply text-slate-900 underline-offset-4 hover:text-slate-700 hover:underline;
+  }
+
+  code {
+    @apply rounded bg-slate-100 px-1.5 py-0.5 text-sm text-slate-900;
+  }
+}
+
+@layer components {
+  .page-lede {
+    @apply mb-5 max-w-3xl text-sm leading-6 text-slate-600;
+  }
+
+  .card {
+    @apply overflow-hidden rounded-md border border-slate-200 bg-white shadow-sm;
+  }
+
+  .card-body {
+    @apply p-5;
+  }
+
+  .card-title {
+    @apply mb-3 font-semibold text-slate-950;
+  }
+
+  .list-group {
+    @apply divide-y divide-slate-200 rounded-md border border-slate-200 bg-white;
+  }
+
+  .list-group-flush {
+    @apply rounded-none border-x-0 border-b-0;
+  }
+
+  .list-group-item {
+    @apply p-4 text-sm text-slate-700;
+  }
+
+  .btn {
+    @apply inline-flex items-center justify-center rounded-md border border-transparent px-3 py-2 text-sm font-medium no-underline transition focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
+  }
+
+  .btn-sm {
+    @apply px-2.5 py-1.5 text-xs;
+  }
+
+  .btn-primary {
+    @apply bg-slate-950 text-white hover:bg-slate-800 hover:text-white;
+  }
+
+  .btn-secondary {
+    @apply border-slate-300 bg-white text-slate-800 hover:bg-slate-100 hover:text-slate-950;
+  }
+
+  .btn-danger {
+    @apply bg-rose-600 text-white hover:bg-rose-700 hover:text-white;
+  }
+
+  .btn-outline-primary {
+    @apply border-slate-950 bg-white text-slate-950 hover:bg-slate-950 hover:text-white;
+  }
+
+  .btn-group {
+    @apply flex flex-wrap items-center gap-2;
+  }
+
+  .button_to {
+    @apply inline-flex;
+  }
+
+  .badge {
+    @apply inline-flex items-center rounded-md px-2 py-1 text-xs font-medium no-underline;
+  }
+
+  .badge-secondary {
+    @apply bg-slate-100 text-slate-700;
+  }
+
+  .badge-info {
+    @apply bg-sky-100 text-sky-800;
+  }
+
+  .form-control,
+  .custom-file-input,
+  input[type="text"],
+  input[type="url"],
+  input[type="email"],
+  input[type="number"],
+  input[type="file"],
+  textarea,
+  select {
+    @apply mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 shadow-sm focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200;
+  }
+
+  label,
+  .form-check-label {
+    @apply text-sm font-medium text-slate-700;
+  }
+
+  .form-check {
+    @apply flex items-center gap-2;
+  }
+
+  .form-check-input,
+  input[type="checkbox"],
+  input[type="radio"] {
+    @apply h-4 w-4 rounded border-slate-300 text-slate-950 focus:ring-slate-400;
+  }
+
+  .custom-file-label {
+    @apply mt-2 block text-xs text-slate-500;
+  }
+
+  .table {
+    @apply w-full divide-y divide-slate-200 text-left text-sm;
+  }
+
+  .table th {
+    @apply bg-slate-50 px-3 py-2 font-semibold text-slate-700;
+  }
+
+  .table td {
+    @apply px-3 py-2 text-slate-700;
+  }
+
+  .row {
+    @apply grid gap-4;
+  }
+
+  .row-cols-1 {
+    @apply grid-cols-1;
+  }
+
+  .row-cols-lg-2 {
+    @apply lg:grid-cols-2;
+  }
+
+  .col {
+    @apply min-w-0;
+  }
+
+  .text-body-secondary {
+    @apply text-slate-500;
+  }
+
+  .text-place {
+    @apply min-w-0;
+  }
+
+  .text-truncate {
+    @apply truncate;
+  }
+
+  .d-flex {
+    @apply flex;
+  }
+
+  .d-inline {
+    @apply inline-flex;
+  }
+
+  .justify-content-between {
+    @apply justify-between;
+  }
+
+  .align-items-center {
+    @apply items-center;
+  }
+
+  .flex-grow-1 {
+    @apply flex-1;
+  }
+
+  .flex-shrink-0 {
+    @apply flex-shrink-0;
+  }
+
+  .h-100 {
+    @apply h-full;
+  }
+
+  .w-100 {
+    @apply w-full;
+  }
+
+  .small {
+    @apply text-sm;
+  }
+
+  .h4 {
+    @apply text-base font-semibold;
+  }
+
+  .h5 {
+    @apply text-sm font-semibold;
+  }
+
+  .h1 {
+    @apply text-2xl font-semibold;
+  }
+
+  .d-block {
+    @apply block;
+  }
+
+  .table-responsive {
+    @apply w-full overflow-x-auto;
+  }
+
+  .g-3 {
+    @apply gap-3;
+  }
+}