Tailwind 2.0 Escaping special characters problem

[Dozorengel]

Describe the problem:

I've updated tailwind from 1.9.6 to 2.0.1, and it crashes on the error:

ERROR in Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Unexpected '/'. Escaping special characters with \ may help.

It refers to this css fragment:

&__menu-item {
    &_active::before {
      @apply absolute top-1/2 left-1/2 w-full h-full box-content bg-brand-white transform -translate-x-6/12 -translate-y-6/12;

My key deps:

"@angular/core": "^10.2.0",
"postcss": "^8.1.2",
"postcss-import": "^13.0.0",
"postcss-loader": "^4.0.4",
"postcss-nested": "^5.0.1",

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            syntax: 'postcss',
            plugins: ['postcss-import', 'tailwindcss', 'postcss-nested', 'autoprefixer'],
          },
        },
      },
    ],
  },
};

Btw, I use the latest LTS nodejs. Now I have to rollback to 1.9.6 to be able to continue the development.

[adamwathan]

Can you create a simple project that reproduces the issue? We got a lot of issues that require me to manually recreate someone's project from scratch and I unfortunately just don't have time for that so things end up going unfixed. If you can provide something I can clone and start troubleshooting with right away it's much easier for me to find time to diagnose and fix the issue.

[wyrd-code]

@adamwathan perhaps some more info might help point in the right direction, I'm also having this issue and it happens when trying to @apply a class with / in it.

I'm using the Tailwind Compositor plugin that generates classes with slashes for vertical rhythm control.

If I try to use to manually escape it @apply text-8\/2 font-bold; the error is: The text-8\/2 class does not exist, but text-8/2 does. If you're sure that text-8\/2 exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

If i set the class manually on the html element, it works.

The docs do point to how to escape them in a plugin, but not how to use them in css. So I'm not sure if this means the class needs to be escaped when generated by the plugin or when I try to use it in my own js or something else. If I find the time I'll create a reproduction, but I thought it might be good to still add some info of my own until that.

Btw, thanks for your awesome work.

[adamwathan]

Looked at this quick again, here it works as expected in Tailwind Play:

https://play.tailwindcss.com/2Y8Za5fw2o?file=css

So will need a reproduction to track this down any further.

[JasonDevTech]

@adamwathan Edit: Fixed due to faulty escape on my end

[bryandonmarc]

@adamwathan Hello, why is this issue closed without proper resolution? It is clearly not working as expected even in Tailwind Play:

https://play.tailwindcss.com/waDs1DDro1?file=config

I've noticed that the problem specifically occurs if trying to @apply translate-x-{amount} or translate-y-{amount} classes wherein the amount is a customized fraction, e.g. 1/5, in the theme.extend.translate section of the config.

However, using theme.extend.spacing instead solves the issue though: https://play.tailwindcss.com/n5rNnTpiC9?file=config

[adamwathan]

Error is a little cryptic but your real problem is you were missing a -1/5 value in your config:

https://play.tailwindcss.com/wwZH8CHdeC?file=config

[bryandonmarc]

Oh, I've wrongly presumed tailwind automatically injects the negative value too. My bad 😅

[Dozorengel]

This error also happens when an invalid tailwind class is applied. For example, -translate-x-6/12, which was valid in 1.9.6, but causes an error in v2.

https://play.tailwindcss.com/ks9nbvrXoR?file=css

However, I have no idea where I took this class because I can't find it in the docs now. Though, tailwind intellisense extension suggests me this class in 1.9.6, but no longer prompts in v2.

That class was an actual root of the problem in my initial post in this thread. I'm very happy to finally migrate to v2.

[y1n0]

I am facing the same the problem. Apparently that happens when a class with / is combined with a variant here's a reproduction https://play.tailwindcss.com/fJ4hqOHAxW?file=css

[vfshera]

I had the same issue but my problem was from my end i was referencing customized minHeight that was non existing

[CaelanStewart]

Yeah had the same error, could do with some better error handling and more helpful error messages here I think.

[scapritta]

I've experienced the same error. In my case was a non-existing class (md:max-w-7/12) Removing the class fixed the error (also if in the @apply there are other "slashed" classes)

[ErikFontanel]

I've experienced the same error, but enabling jit solved it for me

[Hemann55]

Was seeing the same error. In my case, a comment in @layer in my theme.css file was causing the error. Error disappeared after removing the comment

[tannu13]

I've experienced the same error. Finding: It seems it occurs case by case. Irrespective of negative values, it does work for a class like top-1/2 left-1/2 but it does not work for basis-1/4.

[TheTallPaul]

Future traveler, if you're having trouble with plugins using something like width which has fractions, here is your solution:

plugin(({ addUtilities, theme }) => {
    const newUtilities = {};
    const trackWidth = theme('trackWidth', {});
    Object.keys(trackWidth).forEach((key) => {
        const escapedKey = key.replace(/\//g, '\\/');
        const value = trackWidth[key];
        newUtilities[`.track-w-${escapedKey}::-webkit-scrollbar`] = { width: value };
    });

    addUtilities(newUtilities, ['responsive']);
}),

You need to escape the character before inserting it in.