Nesting tailwind withing a .tailwind div to avoid conflicts

[Joeldorne]

How can I achieve compiling the following with Postcss? I know to avoid conflict I can use the prefix which I'm currently doing but I also want to wrap the project in the .tailwind class so I won't have conflicts with elements such as H1. I also want to write a custom base that overwrites the previous projects base styles. I managed to do this with gulp but it broke the responsive tags. I would like to not use gulp in the project.

.tailwind {
  /* 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';
}

[tehpsalmist]

Since you're doing so much custom stuff, why not just remove @tailwind base?

[benface]

Related: https://github.com/tailwindcss/tailwindcss/issues/797

[adamwathan]

Not being able to use import statements nested in a selector like this is unfortunately a limitation of postcss-import and not really an issue with Tailwind.

If you only want to add the class prefix to Tailwind's classes (and not your own custom classes), you should be able to do this, assuming there are no import statements in the file:

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

This also assumes you are using postcss-nested or postcss-nesting to handle nesting.

Alternatively 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 */

Moving to our discussion forum since not an issue with Tailwind.