tailwindcss-multiple-classes
v1.0.2
Published
adding new functionality - merged pseudo-classes and pseudo-elements
Downloads
145
Readme
Advantages
- options for defining your separator, and brackets
- support for nested variants
- There is a postCSS plugin to support css files
The problem
- With the separator:
SPACE
. (more precisely in prettier-plugin-tailwindcss) - The problem with auto-completion (is not displayed) (tailwindcss intelliSense)
- Strange formatting of user classes - puts all classes at the beginning. But as I realized, this problem is solved https://github.com/tailwindlabs/prettier-plugin-tailwindcss/issues/228
Installation
Installation depending on the developer
npm install --save-dev tailwindcss-multiple-classes
Creating a function and exporting it:
// transformMultipleClasses.js
import createTransform from 'tailwindcss-multiple-classes';
const transformMultipleClasses = createTransform({ separator: ',', opBracket: '(', clBracket: ')' });
export default transformMultipleClasses;
Adding to the tailwindcss configuration:
//tailwindcss.config.js
import transformMultipleClasses from './src/transformMultipleClasses.js';
const config = {
content: {
files: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
transform: {
jsx: (content = '') => transformMultipleClasses(content),
// You can designate for any file extension
},
}
...
}
IMPORTANT
: This setting is necessary for tailwindcss to understand what classes it needs to generate in a CSS file, but it does not work as a compiler for files. Details: https://github.com/tailwindlabs/tailwindcss/issues/13705#event-12857014225
Webpack/next.js
webpack: (config, options) => {
config.module.rules.push({
test: /\.jsx/,
use: path.resolve('./transformMultipleClasses.js'),
});
return config;
},
IMPORTANT
: use javascript to support webpack
PostCSS
https://github.com/MrOxMasTer/postcss-tailwindcss-multiple-classes
Demonstration
jsx
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>;
};
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;
}