Possible to prefix the reset CSS rules with ID selector on build?

[EricBusch]

I'm distributing a tailwind CSS file in a WordPress plugin so I need to be very specific about when/where tailwind styles are used so as not to conflict with other styles. I'm currently using this which gets me almost there:

module.exports = {
    prefix: 'abc-',
    important: true
}

However, I need to prefix the reset/normalizing CSS rules which appear before the Tailwind utility classes with my own CSS ID selector.

For example, I need this code...

h1 { font-size: 2em; margin: 0.67em 0; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace;  font-size: 1em; }
...

to be prefixed with my own CSS ID selector during the build process so that I get code like this:

#abc h1 { font-size: 2em; margin: 0.67em 0; }
#abc hr { box-sizing: content-box; height: 0; overflow: visible; }
#abc pre { font-family: monospace, monospace;  font-size: 1em; }
...

Is this possible?

[cytRasch]

Why not just use this:

// tailwind.config.js
module.exports = {
  important: '#app',
}

This will prefix all of your utilities with the given selector, effectively increasing their specificity without actually making them !important, like written in the documentation.

[EricBusch]

That's a cool tip for prefixing the regular utility rules but I also want to prefix the first set of "resetting" rules. These rules appear at the top of the tailwind css file and look like below. Even with the config's important and prefix parameters set, the resetting rules don't get prefixed with any thing.

Beginning of output.css file

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

...

[cytRasch]

Since base styles are meant to target bare selectors like div, h1, etc., they do not respect the user's prefix or important configuration.

That's what the documentation says.

I think that's not possible to progammatically achieve this because the preflight data is provided from a preflight.css file.

[EricBusch]

Thanks. I think you're right. I've removed the preflight and container plugins from the build and have hardcoded those rules in a separate CSS file. Now my tailwind.config.js file looks like this:

module.exports = {
    important: '#app',
    corePlugins: {
        preflight: false,
        container: false,
    }
}

That gets me close enough. Thanks for your tip on the "important" setting. That has been super useful!