How to isolate tailwind?

[itshallrun]

We are currently in the process of gradually migrating a large Reactstrap/Bootstrap-based application to Tailwind. We have tried several approaches, but have encountered issues each time. Either Tailwind breaks the old Bootstrap components, or Bootstrap breaks the new Tailwind components.

The next idea was to isolate Tailwind into a class, so that all components within this class would use Tailwind exclusively. I found a solution here, but am having trouble making it work.

Do you have any tips on how to set up PostCSS to make the tailwind directives apply only within a class like so?

.tailwind {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
}

[andrepichardo]

Hi! To avoid the naming conflicts use the prefix option in your tailwind.config.js file

// tailwind.config.js
module.exports = {
  prefix: 'tw-',   👈 Use your desired prefix 
}

So now you can use the prefix tw- before the class name of tailwind-css which wont break any of your existing styles.

Note
If you want tailwind classes to get more precedence than any other css styles , you can set the important option to true on tailwind.config.js

module.exports = {
  important: true,
}

Hope this answer helps!

[itshallrun]

Hi @andrepichardo and thank you for the suggestion.

we have tried that, but it seems like the tailwind is not properly working without the preflight and/or base. And the css reset is breaking bootstrap. Therefore it seems like this approach is not enough.

In general, is it even possible to nest tailwind like I am trying above?

[andrepichardo]

Oh, I see...

Well, according to @adamwathan (creator of Tailwind) in the solution you mentioned here, there should be no problem to use the next approach:

.tailwind {
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
}

So yeah, It is possible to nest tailwind like that, assuming there are no import statements in the file and you are using postcss-nested or postcss-nesting to handle nesting.

You can learn more about configuring postcss-nesting here!

Alternatively to this, as Adam said, you could write your own PostCSS plugin that uses comments as markers or something to work around the postcss-import limitation, so you're CSS might look like this:

/* start-tailwind-prefix */

/* Tailwind base */
@import './node_module/tailwindcss/base';

/* Custom base */
@import './components/base';

/* Tailwind components */
@import 'tailwindcss/components';

/* Custom components */
@import './components/buttons.css'; 

/* Tailwind utilities */
@import 'tailwindcss/utilities';

/* end-tailwind-prefix */

Best of luck!

[ayophanz]

Try this important: '.review-plugin' and corePlugins: { preflight: false, },

module.exports = {
corePlugins: {
preflight: false,
},
important: '.review-plugin',
content: [
"./**/.php",
"./.php",
"./js/*.js"
],
theme: {
extend: {},
},
plugins: [
require('@tailwindcss/typography')
],
}

[Maks-T]

There is the utility
https://www.npmjs.com/package/tailwind-prefix-migrator

[matthieumiller2101-blip]

how To build best https