Package Exports

@vendeka/tailwindcss-custom-groups

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vendeka/tailwindcss-custom-groups) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Custom groups for TailwindCSS

Need a fixed header after scrolling? Or perhaps you want to toggle classes upon clicking a button.

We got you covered. Just bring your own logic!

Installation

Install the plugin from GitHub:

npm install git+https://github.com/vendeka-nl/tailwindcss-custom-groups.git

Configuration

Add the plugin to your tailwind.config.js file. And define your custom groups using the customGroups option in your theme configuration in your configuration file.

// tailwind.config.js
module.exports = {
  theme: {
    customGroups: [
      'custom-group-name',
    ],
  },
  variants: {
    extends: {
      position: ['custom-group-name'],
    }
  },
  plugins: [
    require('@vendeka/tailwindcss-custom-groups'),
  ],
}

Usage

Use the group names defined in your Tailwind config as a variant in your HTML. Add the group class to the parent using your (frontend) framework of choice.

Example

In the example below we've added a custom group named toggled, which is configured as a variant on the text color utilities. When our button is clicked, the class "toggled" is toggled on the body element, which colors the text green.

<body>
  <div class="text-gray-400 toggled:text-green-500">Toggled?</div>
  <button type="button">Toggle</button>
  <script type="text/javascript">
    document.querySelector('button').addEventListener('click', () => {
      document.body.classList.toggle('toggled');
    });
  </script>
</body>