A plugin for Tailwind CSS v3.0+ that allows the grouping of various modifiers:
From this:
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400 focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500 disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none invalid:border-pink-500 invalid:text-pink-600 focus:invalid:border-pink-500 focus:invalid:ring-pink-500 "/>
To this:
<input type="text" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400 focus:x-[outline-none,border-sky-500,ring-1,ring-sky-500] disabled:x-[bg-slate-50,text-slate-500,border-slate-200,shadow-none] invalid:x-[border-pink-500,text-pink-600] focus:invalid:-x[border-pink-500,ring-pink-500] "/>
NPM
$ npm i tailwindcss-group-modifier-plugin
Yarn
$ yarn add tailwindcss-group-modifier-plugin
PNPM
$ pnpm i tailwindcss-group-modifier-plugin
// tailwind.config.ts/js import groupModifierPlugin from "tailwindcss-group-modifier-plugin"; export default { // ... plugins: [groupModifierPlugin()], };
type: string default: x
Allows changing the prefix from x to anything else.
default syntax:
<input type="text" required class="invalid:x-[bg-blue-500,outline,shadow-md,shadow-red-500] focus:x-[text-blue-500]" />
with a different prefix:
export default { // ... plugins: [groupModifierPlugin({prefix: "myPrefix"})], };
<input type="text" required class="invalid:myPrefix-[bg-blue-500,outline,shadow-md,shadow-red-500] focus:myPrefix-[text-blue-500]" />
The plugin converts the grouped syntax into a single class containing the grouped classes styles within it:
This:
<input type="text" required class="invalid:x-[bg-blue-500,outline,shadow-md,shadow-red-500] focus:x-[text-blue-500]" />
Generates this:
.invalid\:x-\[bg-blue-5002円c outline2円c shadow-md2円c shadow-red-500\]:invalid{ --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); --tw-shadow-color: #ef4444; --tw-shadow: var(--tw-shadow-colored); outline-style: solid } .focus\:x-\[text-blue-500\]:focus{ --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity)) }
- Please avoid using whitespaces between the grouped commas as spaces are token separators in css so
x-[a, b]will be considered two different classes, i.ex-[a,andb] - Avoid using
-in your custom prefix name as-is used as a separator between a value and its data - Using this plugin will add additional classes to your file.
A big thanks goes to @wongjn for suggesting a solution for this problem here: tailwindlabs/tailwindcss#11701 (reply in thread)
Prior art can be found here
My original issue for this thing