Tailwind 2.0 Escaping special characters problem

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]

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

[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.