How can I make TailwindCSS @apply rules work?

I am failing to get custom classes to work using @apply. I have followed the docs but it seems tailwind ignores some classes. Is there anything wrong with how I am doing it?

Here is my input file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .button-primary {
    @apply w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-[#f23732] text-white hover:bg-[#ff1b15] focus:outline-none focus:bg-[#ff1b15] disabled:opacity-50 disabled:pointer-events-none;
  }
  .sc-checkbox-input {
    @apply shrink-0 mt-0.5 border-gray-200 rounded text-smart-red focus:ring-smart-red;
  }

  .sc-input {
    @apply py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-smart-red focus:ring-smart-red disabled:opacity-50 disabled:pointer-events-none;
  }
}

My watcher command looks like this in package.json:

"dev": "cross-env NODE_ENV=development tailwindcss --postcss -i ./src/styles.css -o ../static/css/dist/styles.css -w",

.sc-input never shows up in the output css file, only the first two classes do [.button-primary, .sc-checkbox-input]

Here is my tailwind config as well:

module.exports = {
  content: [
    "node_modules/preline/dist/*.js",
    "../templates/**/*.html",
    "../../templates/**/*.html",
    "../../**/templates/**/*.html",
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['"Space Grotesk"', "sans-serif"],
        default: ['"Space Grotesk"', "sans-serif"],
      },
      colors: {
        "smart-red": "#F23732",
      },
    },
  },
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    require("@tailwindcss/aspect-ratio"),
    require("preline/plugin"),
  ],
};

I have tried using @layer base {} too but same result.

Solution

Consider checking the sc-input can be found as an unbroken string in any file that is covered by the content file globs. This is because, as per the documentation (emphasis mine):

The @layer directive helps you control declaration order by automatically relocating your styles to the corresponding @tailwind directive, and also enables features like modifiers and tree-shaking for your own custom CSS.

Thus, if Tailwind does not see a sc-input string in any of the files that it scans, it will not produce the corresponding CSS rule.

If you need the CSS rule to be produced, you could:

Add the class name to the safelist.
Move the rule outside of any @layer.

As an aside, you may also wish to avoid @apply altogether and rely on your templating engine (if any). As recommended by Adam Wathan, creator of Tailwind:

https://twitter.com/adamwathan/status/1226511611592085504

Confession: The apply feature in Tailwind basically only exists to trick people who are put off by long lists of classes into trying the framework.

You should almost never use it 😬

Reuse your utility-littered HTML instead.
https://twitter.com/adamwathan/status/1559250403547652097

I can say with absolute certainty that if I started Tailwind CSS over from scratch, there would be no @apply 😬

The behavior is outrageously complicated, everyone struggles to build the right mental model of what it's supposed to do, and it encourages bad CSS architecture.