Content transform in css config

[RobinMalfait]

Discussed in #15742

^{Originally posted by skttl January 23, 2025}
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?

[Argiziont]

Same issue, I have this transform block from my tailwind. And from v4 wiki it looks like this is no longer supported in css file, only using

@config '../tailwind.config.js'; 

 transform: {
      cshtml: (content) => content.replaceAll("@@", "@"),
      razor: (content) => content.replaceAll("@@", "@"),
      cs: (content) => content.replaceAll("@@", "@"),
    }

[RobinMalfait]

@Argiziont what are some use cases for .cs files with this syntax? (I'm not a .NET dev so trying to understand if it's good to include it in my PR or just look for cshtml and razor files)

[Argiziont]

@RobinMalfait I guess on that project there was razor code in .cs files. But this is edge case, including only cshtml and razor is sufficient.

But I have additional question, is this possible to have extended content.files in css file. For example when I used v4 tailwind syntax, this ./appsettings.json wasn't included in content for tailwind.

 files: [
      // build tailwind classes in all projects
      '../../**/*.html',
      '../../**/*.cshtml',
      '../../**/*.razor',
      '../../**/*.cs',
      './appsettings.json', // needed for RTE styling
      './node_modules/flowbite/**/*.js'
    ]

[RobinMalfait]

@Argiziont ok perfect thanks;
For your question, you can use the new @source directive for this: https://tailwindcss.com/docs/functions-and-directives#source-directive

[RobinMalfait]

Fixed by #17027 and will be available in the next release.

[senneclaeskens]

Fixed by #17027 and will be available in the next release.

Hi,

This seems to partially work.

@@container mb-16 is processed correctly.
@@container @@md:mb-16 is processed incorrectly.

The first one is rendered as
@container mb-16

The second one is rendered as
@@container @md:mb-16

This is probably not a tailwind issue, but this makes the "razor" pre processing not work correctly. Or at least not having the correct CSS being applied for the class.

Using the content transform, we could use @("@"), which always renders one @ in razor.
Any idea how this can be solved? Since we can't use content transform, we basically don't have a working solution right now.

[thecrypticace]

@senneclaeskens As far as I can tell this is handled correctly in v4. Could you open an issue with a reproduction please?

[senneclaeskens]

@thecrypticace done: #17424