tailwindcss-multiple-classes

Defining several classes at once for one variant

---

Advantages

1. options for defining your separator, and brackets
2. support for nested variants
3. There is a postCSS plugin to support css files

The problem

1. With the separator: SPACE. (more precisely in prettier-plugin-tailwindcss)
2. The problem with auto-completion (is not displayed) (tailwindcss intelliSense) (you can solve it in the settings using: "tailwindCSS.experimental.classRegex")
3. Strange formatting of user classes - puts all classes at the beginning. But as I realized, this problem is solved tailwindlabs/prettier-plugin-tailwindcss#228

Installation

• Webpack/next.js
• PostCSS

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: tailwindlabs/tailwindcss#13705 (comment)

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;
}