A Tailwind plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.

Overview

Tailwind Labeled Groups

A plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.


Installation

Install the plugin:

# npm
npm install -D tailwindcss-labeled-groups
# yarn
yarn add -D tailwindcss-labeled-groups

Then add the plugin to your tailwind.config.js file:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    // This plugin allows you to create custom Tailwind groups.
    // e.g. if you use ['custom'], you could use it as follows:
    //      In the parent: group-custom
    //      In the child:  group-custom-hover:
    require('tailwindcss-labeled-groups')(['custom', '1', /* RENAME ME! */ ])
    // ...
  ],
}

Remember to rename your custom groups!

You are ready to use it

Usage

Assuming we have registered the plugin as follows

require('tailwindcss-labeled-groups')(['custom', '1'])

We now can use:

  • group (default Tailwind value)
  • group-custom and group-1 (registered in the plugin) with every possible combination of variation
<div class="group-custom">
    <div class="group-1">
        <div class="group-1-active:text-slate-500"></div>
    </div>
    <div class="group-custom-focus:bg-pink-200"></div>
</div>

Demo

You can see how it works here: https://play.tailwindcss.com/SMCKXsGYsg

Acknowledgement

Inspired by: tailwindcss-named-groups

You might also like...

A set of utilities and additional features for my creative coding class aiming to help students while introducing the algorithmic thinking.

A set of utilities and additional features for my creative coding class aiming to help students while introducing the algorithmic thinking.

p5.utils A set of utilities and additional features for my creative coding class aiming to help students while introducing the algorithmic thinking. T

Dec 25, 2022

A suite of utilities to add more features to the details element

A suite of utilities to add more features to the details element

Dec 22, 2022

A suite of utilities to add more features to the details element.

A suite of utilities to add more features to the details element.

Dec 22, 2022

A good web interface for youtube-dl that allows you to download arbitrary mixes of audio and video, including up to the highest quality such as 8K.

A good web interface for youtube-dl that allows you to download arbitrary mixes of audio and video, including up to the highest quality such as 8K.

🚀 youtube-dl-web A good web interface for youtube-dl that allows you to download arbitrary mixes of audio and video, including up to the highest qual

Dec 30, 2022

A plugin that uses multiple block, Tailwind and is fully integrated into the standard build process

Tailwind CSS Custom Block Plugin This repo leverages the @wordpress/scripts package and it's ability to use PostCSS to introduce TailwindCSS to the bu

Dec 31, 2022

A website for detecting name of bank from card number, supported all Iranian banks

A website for detecting name of bank from card number, supported all Iranian banks

Detect Iranian Bank Web A website for detecting name of bank from card number, supported all Iranian banks. This package contains SVG logo and brand c

Oct 2, 2022

âš¡Chrome extension allows you to create lists of Google and Github dork to open multiple tabs with one click, import "scope/out of scope" from #HackerOne #Bugcrowd #Intigriti ...

âš¡Chrome extension allows you to create lists of Google and Github dork to open multiple tabs with one click, import

FastDork v0.1 This chrome extension allows you to create lists of Google and Github dork to open multiple tabs with one click, import "scope/out of sc

Dec 31, 2022

True P2P concept for your p2p powered website/app/client. MSC/MEP (Multiple Strategy Concept/Multiple Entry Points)

True P2P concept for your p2p powered website/app/client. MSC/MEP (Multiple Strategy Concept/Multiple Entry Points)

TRUE P2P CONCEPT - Lets redecentralize the web This repo is just conceptual. Active development of the endproduct (TRUE P2P) happens here https://gith

Mar 29, 2022

⚡🚀 Call multiple view functions, from multiple Smart Contracts, in a single RPC query!

ethers-multicall ⚡ 🚀 Call multiple view functions, from multiple Smart Contracts, in a single RPC query! Querying an RPC endpoint can be very costly

Dec 30, 2022
Comments
  • Using group names without state?

    Using group names without state?

    I'd love to use the labeled groups without a state.

    I'd use JavaScript to toggle the necessary group classes and then reference that group in child elements.

    <ul>
      <li class="group-active-item">
         <div class="group-active-item:text-blue-500">Title</div>
         <div class="hidden group-active-item:block">Content</div>
      </li>
    </ul>
    
    opened by christianmagill 2
Releases(v0.0.2)
Owner
Max
Breaking things. Waiting for someone else to fix them
Max
Freeze variations and features in font.

FontFreeze Freeze variations and features in font. Introduction Modern OpenType fonts support variations and features that allow customizable fonts. T

Mu-Tsun Tsai 24 Jan 6, 2023
This Photoshop script exports all top-level layers and groups to cropped PNG and JPEG files and creates a file usable in Tumult Hype 4 based on your Photoshop document.

Export To Hype (Photoshop Edition) This Photoshop script exports all top-level layers and groups to cropped PNG and JPEG files and creates a file usab

Max Ziebell 6 Nov 9, 2022
jQuery easy ticker is a news ticker like plugin, which scrolls the list infinitely. It is highly customizable, flexible with lot of features and works in all browsers.

jQuery Easy Ticker plugin jQuery easy ticker is a news ticker like plugin which scrolls a list infinitely. It is highly customizable, flexible with lo

Aakash Chakravarthy 208 Dec 20, 2022
Smoothly interpolate between variations of SVG paths.

svg-path-morph A simple library for morphing between variations of SVG paths. Use svg-path-morph to smoothly morph between X variations of the same SV

Anders Brams 649 Jan 3, 2023
The simplest implementation of Golang channels, selects and wait groups

TypeScript Channels The simplest implementation of Golang channels, selects and wait groups Installation You can use one of the following package mana

Dimitar Ruskov 9 Dec 8, 2022
Open-sourced version of Orbis groups.

Documentation: Orbis SDK This example is built using the Orbis SDK that developers can use to created decentralized and composable social applications

Orbis 23 Dec 24, 2022
SSB private groups with ssb-db2

ssb-tribes2 TODO TODO Installation npm install ssb-tribes2 Usage in ssb-db2 Requires Node.js 12 or higher Requires secret-stack@^6.2.0 Requires ssb-db

Secure Scuttlebutt Consortium 5 Dec 15, 2022
Enhanced interval features for Node.js, such as promisified interval and human readable time parsing.

Interval-next Interval-next is a package that extends Javascript's built-in setInterval() capabilities. You have a plain and promisified interval meth

Snowy 5 Jul 28, 2022
Multiple level dropdown works with Bootstrap 5, just like native support.

Bootstrap 5 Multiple Level Dropdown. For Bootstrap 4, please visit Bootstrap 4 Multiple Level Dropdown Using official HTML without adding extra CSS st

Dallas Lu 17 Dec 13, 2022