Content transform in css config

[skttl]

To make the default syntax for container queries work, I've added this in my v3 config:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: {
    files: [
      // these are relative to package.json
      './UI/Scripts/**/*.js',
      './Views/**/*.cshtml'
    ],
    transform: {
      cshtml: (content) => {
        return content.replace('@@', '@');
      }
    }
  },

This replaces @@ with @ before looking for classnames, making me able to write eg. @@sm:text-red-500 instead of @sm:text-red-500. The latter would interpret @sm as a razor variable.

Is it possible to do something similar in the new css config format?

[Hugos68]

This should be possible as part of the vite or postcss integrations I think, since that's the part that's responsible for detecting classes. Perhaps a configuration option like so:
tailwindcss({ transform: (...) => ... });

[RobinMalfait]

Hey!

You might have noticed that I created an issue from this discussion. That said, this will work automatically in Tailwind CSS in the next release. This was fixed in #17027

[skttl]

You just made my weekend! Thanks!