rollup-plugin-tailwindcss-multiple-classes
v1.0.3
Published
<div align="center"> <h1>vite-rollup-tailwind-multiple-classes</h1>
Downloads
240
Maintainers
Readme
The main plugin
Support Vite
Important
: Does not process .css
files and its derivatives.
This is handled by postcss
Demonstration
jsx
Example 1 { separator = "," }:
One of the proposed syntaxes in X, which is voted for the most
Before:
const Main = () => {
return <main className="flex mm:bg-red,text-green,hover:text-3xl">...</main>;
};
After:
const Main = () => {
return <main className="flex mm:bg-red mm:text-green mm:hover:text-3xl ">...</main>;
};
Example 2 { separator = ",", opBracket = "(", clBracket = ")" }:
const main = () => {
return <main className="flex supports-[not(**)]:min-height-[10.1px]:h-10,sm:h-20,md:h-30, lg:h-40,xl:h-50,hover:(pl-4,py-3) pl-3">...</main>;};
After:
const main = () => {
return <main className="flex supports-[not(**)]:min-height-[10.1px]:h-10 supports-[not(**)]:min-height-[10.1px]:sm:h-20 supports-[not(**)]:min-height-[10.1px]:md:h-30 supports-[not(**)]:min-height-[10.1px]:lg:h-40 supports-[not(**)]:min-height-[10.1px]:xl:h-50 supports-[not(**)]:min-height-[10.1px]:hover:pl-4 supports-[not(**)]:min-height-[10.1px]:hover:py-3 pl-3">...</main>;};
css
IMPORTANT
: You need to connect the PostCSS plugin
Before:
.class {
@apply mm:bg-red,text-green;
}
After:
.class {
@apply mm:bg-red mm:text-green;
}
Installation
Installation depending on the developer
npm install --save-dev tailwindcss-multiple-classes rollup-plugin-tailwindcss-multiple-classes
// vite.config.js
import tailwindMultipleClasses from "rollup-plugin-tailwindcss-multiple-classes";
export default defineConfig({
plugins: [tailwindMultipleClasses({ separator: ",", opBracket: "(", clBracket: ")" }), react()],
});