Resolve config file relative to the file being transformed instead of cwd

[mischnic]

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

A "standard" PostCSS config like

const path = require("path");

module.exports = {
  plugins: [
      require('tailwindcss')
  ]
}

causes Tailwind to search for the config file relative to the current working directory because of this

tailwindcss/src/util/resolveConfigPath.js

Lines 46 to 48 in a7263a8

	for (const configFile of ['./tailwind.config.js', './tailwind.config.cjs']) {
	try {
	const configPath = path.resolve(configFile)

I think it should instead be relative to the file that's being processed. This way you could also have a single project with multiple config files for different parts.

This might have performance downsides if you currently search just once for a config.

[thecrypticace]

Hey, we spent a good bit of time coming up with a solution here and the result of it is the new @config feature for v3.2 which lets you specify the config file location relative to a given CSS file! (see #9405 for more details)

The automatic resolution based on path to the input file (so @config isn't needed in some cases) is something we may plan for v4 but this new feature will work for these use cases as well — and it's a bit more powerful since it simplifies using multiple configs with different names which is a fairly common occurrence in projects with a user/admin split.

Thank you for your patience — and for the suggestion! ✨

You should be able to test this out in our insiders build in a few minutes once it is published with npm install tailwindcss@insiders