Add support for displaying color swatches and long class reference

assets/stylesheets/application.css.scss

@@ -116,6 +116,7 @@
         'pages/sphinx_simple',
         'pages/sqlite',
         'pages/support_tables',
+        'pages/tailwindcss',
         'pages/tcl_tk',
         'pages/tensorflow',
         'pages/terraform',

assets/stylesheets/pages/_tailwindcss.scss

@@ -0,0 +1,48 @@
+._tailwindcss {
+  // Styling for customizing-colors page - color swatches (based on original tailwind display design)
+  .colors {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+
+    // Text offset
+    margin-bottom: 1rem;
+  }
+
+  // Color swatch title
+  .color > div:first-child {
+    font-weight: bold;
+  }
+
+  .color-swatch-group {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .color-swatch-container {
+    display: inline-block;
+  }
+
+  // Tiny box with the color set as background
+  .color-swatch {
+    width: 120px;
+    height: 40px;
+    border-radius: 4px;
+  }
+
+  .color-tone-information {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  // Styling for large quick-reference lookup tables
+  .long-quick-reference {
+    max-height: 40vh;
+    width: fit-content;
+    overflow-y: auto;
+    padding: .3rem;
+    border-top: 1px solid var(--textColor);
+    border-bottom: 1px solid var(--textColor);
+  }
+}

lib/docs/filters/tailwindcss/clean_html.rb

@@ -41,16 +41,42 @@ module Docs
         # Remove footer + prev/next navigation
         at_css('footer').remove
 
-        css('#nav ul li').each do |node|
-          link = node.css("a").attr('href').to_s
-          if link.include? "https://"
-            node.remove()
+        # Handle long lists of class reference that otherwise span several scrolled pages
+        if class_reference = at_css('#class-reference')
+          reference_container = class_reference.parent
+          classes_container = reference_container.children.reject{ |child| child == class_reference }.first
+
+          rows = classes_container.css("tr")
+
+          if rows.length > 10
+            classes_container.set_attribute("class", "long-quick-reference")
           end
         end
 
-        # Remove right sidebar
-        css('#content-wrapper > div > div.hidden.xl\:text-sm.xl\:block.flex-none.w-64.pl-8.mr-8 > div > div').each do |node|
-          node.remove
+        # Remove border color preview column as it isn't displayed anyway
+        if result[:path] == "border-color" and class_reference = at_css('#class-reference')
+          class_reference.parent.css("thead th:nth-child(3)").remove
+          class_reference.parent.css("tbody td:nth-child(3)").remove
+        end
+
+        if result[:path] == "customizing-colors"
+          # It's nice to be able to quickly find out what a color looks like
+          css('div[style^="background-color:"]').each do |node|
+            node.set_attribute("class", "color-swatch")
+
+            swatch_container = node.parent
+            swatch_container.set_attribute("class", "color-swatch-container")
+            swatch_container.children.reject{ |child| child == node }.first.set_attribute("class", "color-tone-information")
+
+            swatch_group = swatch_container.parent
+            swatch_group.set_attribute("class", "color-swatch-group")
+
+            color = swatch_group.parent
+            color.set_attribute("class", "color")
+
+            color_list = color.parent.parent
+            color_list.set_attribute("class", "colors")
+          end
         end
 
         # Remove buttons to expand lists - those are already expanded and the button is useless