Skip to content
Open variant for Tailwind CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
screenshots
.editorconfig
.gitattributes
.gitignore
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE.md
README.md
UPGRADING.md
index.js
package.json

README.md

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.

You can’t perform that action at this time.