applyComplexClasses forces to use prefixes with @apply

[timmyjs]

This issue is related to "Add support for @apply with complex classes, including responsive and pseudo-class variants". Apologies if it's already been reported, but I couldn't find anything similar:

Describe the problem:

Using applyComplexClasses as an experimental feature breaks my build with the error message:
"CssSyntaxError: The 'pt-3' class does not exist, but 'tw-pt-3' does. ...".

In my tailwind.config.js I've set the "prefix" option to "tw-" indeed, but regarding to the documentation of the @apply directive I expected to be able to use the applied utilities without prefixes as well - also it worked before I updated my Tailwind version and added the applyComplexClasses flag 🙂

Link to a minimal reproduction:

tailwind.config.js:

module.exports =  {
	experimental: {
		applyComplexClasses: true
	},
	future: {
		removeDeprecatedGapUtilities: true,
	},
	purge: {...},
	prefix: 'tw-',
	theme: {...},
	plugins: [require('tailwindcss-border-styles')()],
});

package.json

  "devDependencies": {
    "postcss": "7.0.32",
    "postcss-cli": "7.1.2",
    "tailwindcss": "1.7.6",
    "tailwindcss-border-styles": "1.0.1"
    ...
  },

PS: In love with tailwind, thank you for the great job ❤️

[JNavith]

You're reading the documentation for the @apply that's been in Tailwind forever, not the new (still an experimental feature, by the way, so it's not on the docs site yet) one. It's a known breaking change that you have to use your prefix now, see the original pull request's "Can't apply utilities without your configured prefix" heading.

[timmyjs]

You are absolutely right, I must have overlooked that. Sorry for that and thanks for the quick clarification!