Apply a prefix (important with a css selector) to base style (preflight)

[victor-michaux]

Currently, using the important configuration option with a css selector as value will result in adding a prefix only to the utilities classes.

Is it possible to add that prefix to the base/preflight layer ?

I'm trying to integrate tailwind on a big project that has a lot of existing css, but using the default config brings side effects as the base layer impacts the existing looking.

I would like to use tailwind preflight without impacting existing styles and not have to write things like this because of browsers default styling:

<div class="border-0 border-t-2 border-solid">Some text</div>

[fehergeri13]

I have this idea: #7050

[bpeab]

I agree that it would be a great feature for slowly migrating an old source code to Tailwind without too much hustle. Is there any way we could already do that with the current version that wouldn't be documented or that I didn't find ? The prefix option doesn't seem to affect the preflight at all right now.

[kevinkorngut]

I am in this exact situation and think I might've found a solution. If you're using PostCSS there's a plugin, postcss-prefix-selector which can prefix and then some. Glancing at it's options it looks like you could use it to prefix all the preflight classes one way, and if you were applying a prefix you could use that to key off of and treat the utility classes in another if you needed.

[ericvel]

@kevinkorngut Did you end up using the plugin? Would be interested in seeing your solution for this.

[unlocomqx]

This shows up first on search, so here's the solution that worked for me, maybe it will help someone else.

@layer base {
    #app {
        @import "tailwindcss/preflight";
    }
}

@import 'tailwindcss/utilities';
@import 'tailwindcss/theme' prefix(app); <-- for tailwind 3, configure the prefix in tailwind.config.js

postcss.config.js

export default {
  plugins: {
    'postcss-nesting': {},
  },
}