Switch from SASS to Tailwind

Gemfile

@@ -13,7 +13,7 @@ gem "puma"
 
 # Assets
 gem "sprockets-rails"
-gem "dartsass-rails"
+gem "tailwindcss-rails"
 gem "importmap-rails"
 gem "turbo-rails"
 gem "stimulus-rails"

Gemfile.lock

@@ -179,9 +179,6 @@ GEM
     cuprite (0.15.1)
       capybara (~> 3.0)
       ferrum (~> 0.15.0)
-    dartsass-rails (0.5.1)
-      railties (>= 6.0.0)
-      sass-embedded (~> 1.63)
     date (3.4.1)
     debug (1.10.0)
       irb (~> 1.10)
@@ -220,9 +217,6 @@ GEM
       csv (>= 3.0.0)
     globalid (1.2.1)
       activesupport (>= 6.1)
-    google-protobuf (4.29.0)
-      bigdecimal
-      rake (>= 13)
     hashdiff (1.1.2)
     hashid-rails (1.4.1)
       activerecord (>= 4.0)
@@ -383,12 +377,6 @@ GEM
     ruby-vips (2.2.2)
       ffi (~> 1.12)
       logger
-    sass-embedded (1.81.0-aarch64-linux-gnu)
-      google-protobuf (~> 4.28)
-    sass-embedded (1.81.0-arm64-darwin)
-      google-protobuf (~> 4.28)
-    sass-embedded (1.81.0-x86_64-linux-gnu)
-      google-protobuf (~> 4.28)
     securerandom (0.4.1)
     simple_form (5.3.1)
       actionpack (>= 5.2)
@@ -422,6 +410,12 @@ GEM
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
     stringio (3.1.2)
+    tailwindcss-rails (4.0.0)
+      railties (>= 7.0.0)
+      tailwindcss-ruby (~> 4.0)
+    tailwindcss-ruby (4.0.6-aarch64-linux-gnu)
+    tailwindcss-ruby (4.0.6-arm64-darwin)
+    tailwindcss-ruby (4.0.6-x86_64-linux-gnu)
     thor (1.3.2)
     timeout (0.4.3)
     turbo-rails (2.0.11)
@@ -477,7 +471,6 @@ DEPENDENCIES
   countries
   country_select
   cuprite
-  dartsass-rails
   debug
   dotenv-rails
   faraday
@@ -503,6 +496,7 @@ DEPENDENCIES
   sprockets-rails
   standard
   stimulus-rails
+  tailwindcss-rails
   turbo-rails
   tzinfo-data
   versioncake

app/assets/stylesheets/shared/_app.scss

@@ -5,14 +5,6 @@ body {
   scrollbar-gutter: stable;
 }
 
-.hidden-link {
-  text-decoration: none;
-
-  &:hover, &:focus {
-    text-decoration: underline wavy;
-  }
-}
-
 .container {
   @media screen and (max-width: 32em) {
     padding: var(--spacing-3);

app/assets/stylesheets/shared/_spacing.scss

@@ -1,25 +1,6 @@
 @use "sass:list";
 @use "sass:string";
 
-// vvv DEPRECATED BEGIN vvv
-$spacing-unit: 1rem;
-
-@each $direction in (top, bottom, left, right) {
-  .push--#{$direction} {
-    margin-#{$direction}: $spacing-unit;
-  }
-
-  .push-double--#{$direction} {
-    margin-#{$direction}: $spacing-unit * 2;
-  }
-
-  .push-half--#{$direction} {
-    margin-#{$direction}: calc($spacing-unit / 2);
-  }
-}
-
-// ^^^ DEPRECATED END ^^^
-
 @for $unit from 0 through 8 {
   @each $direction in (top, bottom, left, right) {
     $dir: string.slice($direction, 0, 1);

app/assets/tailwind/application.css

@@ -0,0 +1 @@
+@import "tailwindcss";

app/helpers/application_helper.rb

@@ -40,8 +40,7 @@ def avatar(user, size: "32px", **options)
 
     default_options = {
       alt: "#{user.name} profile picture",
-      class: "avatar",
-      style: "width: #{size}; height: #{size};"
+      class: "align-middle size-[#{size}] rounded-full"
     }
 
     image_tag user.gravatar_url, default_options.deep_merge(options)
@@ -53,6 +52,18 @@ def ui_avatars(name, html: {}, **options)
     image_tag url.to_s, **html
   end
 
+  def classes_for_hackathon_status(status)
+    case status
+    when "approved"
+      "text-[var(--green)]"
+    when "rejected"
+      "text-[var(--red)]"
+    when "pending"
+      "text-[var(--slate)]"
+    end <<
+      " border-current bg-[color-mix(in srgb, currentcolor) 3%, transparent);]"
+  end
+
   def page(size)
     size = :normal unless %i[full wide copy narrow].include?(size)
     return if size == :normal

app/views/admin/_header.html.erb

@@ -1,5 +1,5 @@
-<nav style="background: var(--sheet);">
-  <div class="container wide" style="padding: var(--spacing-4); padding-bottom: 0">
+<nav class="bg[var(--sheet)]">
+  <div class="container wide p-4 pb-0">
     <%= render "admin/header/heading" %>
     <%= render "admin/header/nav" %>
   </div>