config.content should be resolved relative to the config file for PostCSS dependencies

What version of Tailwind CSS are you using?

v3.0.2

What build tool (or framework if it abstracts the build tool) are you using?

Parcel 2 👋

What version of Node.js are you using?

16

What operating system are you using?

macOS

Describe your issue

If you have a tailwind config file like

module.exports = {
    content: ["index.html"],
    theme: {
        extend: {},
    },
    plugins: [],
}

, I think content should be relative to that config file.

However, it is resolved relative to the process’s working directory.

fileOrGlob here is “index.html”.

https://github.com/tailwindlabs/tailwindcss/blob/a7263a8f6faf989cb98553491d5c456d0b86de9b/src/lib/setupTrackingContext.js#L160

and then path.resolve(file) resolved it relative to the cwd. It should be path.resolve(path.dirname(configPath), file) instead:

https://github.com/tailwindlabs/tailwindcss/blob/a7263a8f6faf989cb98553491d5c456d0b86de9b/src/util/parseDependency.js#L37-L39

This results in a PostCSS dependency message with a filepath of ${cwd}/index.html, regardless of where that file is actually located.

[k33n8nc]

This is a problem for Wordpress themes also where all template files live in the root folder.

[sibiraj-sr]

This is an issue in angular workspaces as well. Having tailwind.config.js in one of the project doesn’t resolve relative paths correctly after updating to v3. One has to provide full path from the root.

config file path: projects/app/tailwind.config.js

content: [
  './projects/app/src/**/**.ts'
]

rather than

content: [
  './src/**/**.ts'
]