Data-Attributes Magic with Tailwind CSS & Stimulus

data-attributes-magic-with-tailwind-css-&-stimulus

This article was originally published on Rails Designer

Changing the way some, or all, UI elements on an user interaction (click, hover, etc.) is really common. So you better have a good process to use this common flow.

There are basically three ways to go about this:

  1. add the CSS class(es) to every element that needs changing;
  2. add CSS classes to the parent element (eg. ) to enable cascading of additional styles from it to child elements;
  3. add a data attribute to the parent element (eg. ) to enable cascading of additional styles from it to child elements.

I don’t think I need to go over option 1, as that would never be a maintainable option. So let’s check out option 2 first, followed by option 3. As I use Tailwind CSS exclusively that’s what these examples use.

 class="group/nav nav-opened">
   class="hidden group-[.nav-opened]/nav:block">
    
  • Item here
  • I’m using named grouping, opposed to just group (which is a good thing to do any way).

    I don’t think this solution is really bad, especially if you name the CSS class (.nav-opened) well. But now check out the option with a data attribute.

     data-nav-opened class="group/nav">
       class="hidden group-data-[nav-opened]/nav:block">
        
  • Item here
  • Quite similar, right? Actually it is a bit longer than the CSS class option. But the more important point is that it keeps concerns separated (CSS classes for aesthetics and data-attributes for states and behavior).

    Quick pro-tip. The following works just as well with Tailwind CSS. It uses the open-modifier.

     open class="group/nav">
       class="hidden group-open/nav:block">
         class="text-orange-500">Item here
      
    
    

    So far, the examples shown were really simple. But there’s no reason you cannot expand what happens when the parent’s “state” changes. A common thing you see is a chevron that changes rotation. Something like this:

     data-nav-opened class="group/nav">
       class="flex items-center gap-1">
        Open
         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-3 h-3 transition group-data-[nav-opened]/nav:rotate-180">
           fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"/>
        
      
    
       class="hidden group-data-[nav-opened]/nav:block">
        
  • Item here
  • Notice the svg inside the button that flips 180º when data-nav-opened is added? From here on out, it’s only your imagination that is the limiting factor.

    How can we combine this with Stimulus?

    Stimulus is a great choice for user interactions like this as it’s really declarative, this works great together with the Tailwind CSS setup explained above.

    The following Stimulus controller is one I use often (and comes together with some of the Rails Designer Components).

    // app/javascript/controllers/data_attribute_controller.js
    import { Controller } from "@hotwired/stimulus";
    
    export default class extends Controller {
      static values = { key: String };
    
      disconnect() {
        this.element.removeAttribute(this.keyValue);
      }
    
      toggle() {
        this.element.toggleAttribute(`data-${this.keyValue}`);
      }
    }
    

    That’s the whole controller! With the above example, this is how it’s used:

     data-controller="data-attribute" data-attribute-key-value="nav-opened" class="group/nav">
       data-action="data-attribute#toggle" class="flex items-center gap-1">
        Open
         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" class="w-3 h-3 transition group-data-[nav-opened]/nav:rotate-180">
           fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd"/>
        
      
    
       class="hidden group-data-[nav-opened]/nav:block">
        
  • Item here
  • And that’s how, by combining two—really developer-friendly—tools, you can create usable (Rails) applications with a minimal amount of code.

    Total
    0
    Shares
    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Previous Post
    notion-gantt-chart:-key-features,-pros-and-cons

    Notion Gantt Chart: Key Features, Pros and Cons

    Next Post
    the-most-effective-guide-to-keyword-research

    The Most Effective Guide to Keyword Research

    Related Posts