Enable Disabling Preflight Based on Path

[Blushyes]

I've been working on a Chrome extension and encountered a challenging issue with the preflight feature of Tailwind CSS, which tends to disrupt the styling of the original web page. Currently, there doesn't seem to be built-in support for selectively disabling the preflight feature at the content-script level while keeping it enabled elsewhere, such as in popups.

As a workaround, I have stopped including @tailwind base in the content script, but this approach occasionally leads to incorrect styles from Tailwind CSS. I am wondering if there is an existing solution to achieve such isolation, or if this could be a feature worth considering for addition to Tailwind CSS to better support Chrome extension development.

It likes:

But this is what it originally looked like:

[wongjn]

For what it's worth, you'd want to disable the preflight plugin, instead of removing @tailwind base.

[wongjn]

Thank, I understood your requirements the first time around! My point was that you'd want to disable the preflight plugin, instead of removing @tailwind base – not that this would fulfil your requirements.

As a work-around, you could disable the preflight plugin and reimplement the core code and scope it yourself within your own Tailwind plugin.

[Blushyes]

👌🏻, thanks, I will try it.

[Blushyes]

I just gave it a try to write a Tailwind Plugin like this, but unfortunately, it seems that Tailwind does not provide the capability to determine the path of the file it is currently processing. Thus, the only option appears to be attempting to write a plugin for the build tool, which is obviously quite complex. So, it seems that the issue at hand is whether Tailwind needs to support plugins being aware of which files they are processing.

const fs = require('fs')
const path = require('path')
const postcss = require('postcss')
const tailwindVersion = require('tailwindcss/package.json').version

module.exports = function customPreflightPlugin() {
  return function ({ addBase }) {
    const shouldApplyPreflight = (context) => {
      // The logic can be based on the file path provided in the context
      // For example, do not apply preflight for files under `src/content-script` directory
      // However, the file path information in this context is not always available, it depends on how you run Tailwind
      if (!context) return true
      return !context.includes('./content-script')
    }

    const tailwindCssPath = path.dirname(
      require.resolve('tailwindcss/package.json')
    )
    const preflightPath = path.join(tailwindCssPath, 'src/css/preflight.css')
    let preflightStyles = postcss.parse(fs.readFileSync(preflightPath, 'utf8'))

    const addCustomPreflight = (context) => {
      if (!shouldApplyPreflight(context)) {
        return
      }
      addBase([
        postcss.comment({
          text: `! tailwindcss v${tailwindVersion} | MIT License | https://tailwindcss.com`,
        }),
        ...preflightStyles.nodes,
      ])
    }

    addCustomPreflight(['...', ...]) // Here we should pass the file path parameter
  }
}

[wongjn]

You could use the @config directive to set a different Tailwind configuration file for the CSS file you'd want your modified preflight in. Then, have this Tailwind configuration be nearly the exact same as your main Tailwind configuration file (or have your main Tailwind configuration as a preset) and add your modified preflight plugin to only that Tailwind configuration.

[Blushyes]

Oh my dude, the problem that's been bugging me all day is finally solved! I'm super grateful to you! Looks like diving into the official docs really pays off when it comes to these nitty-gritty details! 📚✨