About

@accelint/postcss-tailwind-css-modules is a postcss plugin that uses https://www.npmjs.com/package/postcss-selector-parser under the hood to wrap specific class nodes in a :global(...) pseudo class.

What problem does this solve?

Tailwind has some nifty utilities for styling based on parent state. However, these utility classes use global classes under the hood. Without this plugin, those classes get hashed by css modules and styling based on parent state breaks.

[!NOTE]
currently the plugin fixes group/ classes. Future updates can expand the functionality to support other classes that may have a similar problem, like peer/ classes.

Example transformation flow from source -> postcss -> css modules

Without this plugin:

With this plugin:

Usage

Installation

pnpm add -D @accelint/postcss-tailwind-css-modules

Turbo and Webpack

Add this plugin to your postcss config. it must come AFTER the tailwind postcss plugin

export default {
  plugins: {
    '@tailwindcss/postcss': {},
    '@accelint/postcss-tailwind-css-modules': {},
  },
};

Vite

Continue to use the tailwind vite plugin in your vite config

Your postcss.config.js file only needs our plugin, as tailwind's postcss stuff is included in their vite plugin

export default {
  plugins: {
    '@accelint/postcss-tailwind-css-modules': {},
  },
};

[!NOTE]
the array syntax for postcss plugin configuration does not seem to work with vite. i.e. plugins: ['@accelint/postcss-tailwind-css-modules'] will cause errors.