Use @apply directive to define custom 'active' style

https://tailwindcss.com/docs/functions-and-directives#apply
dxw · Oct 24, 2024 · 2e6154a · 2e6154a
1 parent 7de224d
commit 2e6154a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/app/assets/stylesheets/application.tailwind.css.scss b/app/assets/stylesheets/application.tailwind.css.scss
@@ -3,3 +3,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.active {
+  @apply border-[3px] border-black border-solid border-b-0 text-black -mb-[3px] bg-white;
+}
diff --git a/app/views/styled_forecasts/_day_tab.html.erb b/app/views/styled_forecasts/_day_tab.html.erb
@@ -1,4 +1,4 @@
-<%= tag.div class: "tab py-4 flex-1 #{day} mx-2 px-1 text-center daqi-low border-b-0 border-l-2 border-r-2 border-t-2 border-gray-300 #{day == :today ? "active" : ''}",
+<%= tag.div class: "tab py-4 flex-1 #{day} mx-2 px-1 text-center text-gray-400 daqi-low border-b-0 border-l-2 border-r-2 border-t-2 border-gray-400 border-dashed #{day == :today ? "active" : ''}",
   data: {
     date: forecast.date.to_s,
     controller: "tab",

diff --git a/app/views/styled_forecasts/_forecast_tabs.html.erb b/app/views/styled_forecasts/_forecast_tabs.html.erb
@@ -3,7 +3,7 @@
     Air pollution
   </header>
   <div
-    class="tabs flex flex-row items-stretch mt-4 m-1 text-xs font-bold"
+    class="tabs flex flex-row items-stretch mt-4 m-1 text-xs font-bold border-b-[3px] border-black"
     data-turbo-prefetch="false"
     >
     <%= render "day_tab", forecast: @forecasts.first, day: :today %>