Allow all classes for @apply

[garymathews]

Relates to #6321

• Basically, apply only works for Tailwind generated classes under JIT; which is default when moving to Tailwind 3.
  • This issue is also present in Tailwind 2 when using JIT.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

If I run your tests against the current master branch, then it already passes. I'll look into the actual issue and mark you as a contributor if I have a fix.

[garymathews]

@RobinMalfait, thanks for fixing this 👍 #6589

However, I noticed it's required to reference @tailwind; to the particular css file with the @apply for this to work (don't even need to define a property); where before this was not necessary. (I should only need to define directives in my main css file)

it('should pickup all classes', () => {
  let config = {
    content: [{ raw: html`<div class="foo"></div>` }],
    plugins: [],
  }

  let input = css`
    @tailwind; /* remove me I break */

    .bop {
      color: red;
    }
    .bar {
      background-color: blue;
    }
    .foo {
      @apply absolute bar bop;
    }
  `

  return run(input, config).then((result) => {
    return expect(result.css).toMatchFormattedCss(css`
      @tailwind;
      .bop {
        color: red;
      }
      .bar {
        background-color: blue;
      }
      .foo {
        position: absolute;
        color: red;
        background-color: blue;
      }
    `)
  })
})

The `bar` class does not exist. If `bar` is a custom class, make sure it is defined within a `@layer` directive.

[garymathews]

I found its due to an optimization where css files without a directive are ignored:
setupTrackingContext.js#L127
setupWatchingContext.js#L244

Removing the condition to allows the test to pass.

[garymathews]

@RobinMalfait I've updated my PR with a solution that maintains the optimization for css without @tailwind or @apply