Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

TailwindCSS Open Variant

License

Open variant for TailwindCSS, to use with the HTML <details> tag and apply styles only when the element is open.

💾 Installation

You can install the package with npm or yarn using the following commands:

# With NPM
npm install tailwindcss-open-variant --save-dev

# With Yarn
yarn add tailwindcss-open-variant --dev

Once installed, require it as a plugin in your Tailwind config file.

plugins: [
  // Other plugins...

  require('tailwindcss-open-variant')(),
],

Finally, add the open variant as variants to your desired modules.

modules: {
    // Other modules...

    backgroundColors: ['responsive', 'hover', 'focus', 'open'],
    borderColors: ['responsive', 'hover', 'focus', 'group-hover', 'open'],
    borderRadius: ['responsive', 'hover', 'group-hover', 'open'],
    borderStyle: ['responsive', 'open'],
    display: ['responsive', 'open'],
    shadows: ['responsive', 'hover', 'focus', 'open'],
    textColors: ['responsive', 'hover', 'focus', 'group-hover', 'open'],
},

📝 Usage

Once installed, you can prefix your defined utilities with open: to apply them only when the current details tag, or the parent details tag of the given node, is opened.

You can use this to, for example, display a dropdown menu where the button text changes depending on whether it is open or not:

<details class="inline-block">
    <summary class="cursor-pointer select-none align-middle whitespace-no-wrap outline-none rounded-lg focus:outline-none focus:shadow-outline" aria-haspopup="menu">
        <span class="button rounded-lg inline-block open:hidden">Open</span>
        <span class="button rounded-lg hidden open:inline-block">Close</span>
    </summary>
    <div class="absolute" role="menu">
        <div class="relative bg-white border-t border-b shadow min-w-xs flex flex-col border-t-0 rounded-lg rounded-tl-none p-1 text-left">
            <a href="#" class="px-4 py-2 block rounded no-underline focus:shadow-outline text-black hover:bg-grey-lighter">Copy link</a>
            <a href="#" class="px-4 py-2 block rounded no-underline focus:shadow-outline text-black hover:bg-grey-lighter">Delete comment</a>
        </div>
    </div>
</details>

You can also manipulate styles depending on the open state, so as to make the summary fit in with the newly shown element.

<details class="inline-block">
    <summary class="cursor-pointer select-none align-middle whitespace-no-wrap outline-none rounded-lg focus:outline-none focus:shadow-outline" aria-haspopup="menu">
        <span class="flex items-center cursor-pointer text-sm border-grey rounded-lg py-1 px-2 text-grey-dark focus:shadow hover:shadow open:shadow open:rounded-b-none open:text-grey-darker bg-white p-3">
            &hellip;
        </span>
    </summary>
    <div class="absolute" role="menu">
        <div class="relative bg-white border-t border-b shadow min-w-xs flex flex-col border-t-0 rounded-lg rounded-tl-none p-1 text-left">
            <a href="#" class="px-4 py-2 block rounded no-underline focus:shadow-outline text-black hover:bg-grey-lighter">Copy link</a>
            <a href="#" class="px-4 py-2 block rounded no-underline focus:shadow-outline text-black hover:bg-grey-lighter">Delete comment</a>
        </div>
    </div>
</details>

🔖 Changelog

Please see the changelog file for more information on what has changed recently.

⬆️ Upgrading

Please see the upgrading file for details on upgrading from previous versions.

🎉 Contributing

Please see the contributing file and code of conduct for details on contributing to the project.

👷 Credits

♻️ License

The MIT License (MIT). Please see the license file for more information.

About

Open variant for Tailwind CSS

Resources

License

Releases

No releases published

Packages

No packages published