Define parent class, so you don't need use prefix

[cloudstudio]

Hello guys!

I would like to use tailwind in a project that already exists, to avoid conflicts I understand we can use prefix, but this makes writing the classes quite long.

I have some snippets, and I use visual code plugin for tailwind, so I can code soooo fast, anyway stop working for me when I use prefix :P

Could be nice in config file add a "parent class", for example:

// tailwind.config.js
module.exports = {
  parentClass: 'tailwind-container',
}

So you can use tailwind as allways for example : mr-12 not tw-mr-12, you only need a parent class.

<div class="tailwind-container">
   <div class="mr-12>
      <p>Working</p>
   </div>
</div>

<div class="mr-12>
   <p>Not Working</p>
</div>

What you think guys ?

[carlos-widgilabs]

That's great, because I can use it in Wordpress Guttemberg without affecting the rest of BackOffice just in the text editor.

[jovisjoseph]

Since tailwind uses postCSS to generate the CSS files, you could use the [postcss-prefix-selector](https://github.com/RadValentin/postcss-prefix-selector) plugin to achieve the same thing.

[hugo-abdou]

Hello guys!

I would like to use tailwind in a project that already exists, to avoid conflicts I understand we can use prefix, but this makes writing the classes quite long.

I have some snippets, and I use visual code plugin for tailwind, so I can code soooo fast, anyway stop working for me when I use prefix :P

Could be nice in config file add a "parent class", for example:

// tailwind.config.js
module.exports = {
  parentClass: 'tailwind-container',
}

So you can use tailwind as allways for example : mr-12 not tw-mr-12, you only need a parent class.

<div class="tailwind-container">
   <div class="mr-12>
      <p>Working</p>
   </div>
</div>

<div class="mr-12>
   <p>Not Working</p>
</div>

What you think guys ?

not work for mee ???????

[vivgui]

This is how I got to work thanks to @jovisjoseph's suggestion.

Install the package: npm install postcss-prefix-selector

Then in your postcss.config.js, you need to add the plugin after tailwind runs, like this:

module.exports = {
	plugins: [
          require('tailwindcss/nesting'),
	  require('tailwindcss'),
	  require("postcss-prefix-selector")({
		prefix: '.parent-class',
	  }),
	]
}

[c5n8]

Great discovery!
If only I can make it works with vue cli 5 😭

[petr24]

Thank you to everyone who works on postcss and all the plugins!!

[Jessicaalban86]

That is a good idea! By having a parent class, you can ensure that the styles from Tailwind are scoped to a specific area and do not interfere with any other styles in the project. This approach can also make the code easier to maintain and understand, as the styles are organized in a clear and consistent way.

However, it's important to note that this approach might not be suitable for all projects. In some cases, it may be preferable to use the prefix method to avoid conflicts with existing styles, or to enforce a strict namespacing convention. Ultimately, the choice between the two approaches will depend on the specific needs and constraints of the project. Dinar Guru

[MoishyS]

just add an important selector https://tailwindcss.com/docs/configuration#selector-strategy

module.exports = {
  important: '.tw',
}

will create classes like

.tw .mr-10 {
    margin-right: 10px
}

[MAGNUM81]

Tailwind has a tendency to redefine some CSS for other selectors/elements as well such as img, svg, video, button, ... your solution does not seem to mitigate that behavior. The postcss-prefix-selector solution does, and makes the final generated tailwind code way better isolated.