tailwindcss: 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.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 15 (3 by maintainers)
Commits related to this issue
- Workaround: Fluid width of columns broken There seems to be an issue with escaping classes like "w-1/4". https://github.com/tailwindlabs/tailwindcss/issues/2958 — committed to phollome/list-of-literature by phollome 3 years ago
- Workaround: Fluid width of columns broken There seems to be an issue with escaping classes like "w-1/4". https://github.com/tailwindlabs/tailwindcss/issues/2958 — committed to phollome/list-of-literature by phollome 3 years ago
Error is a little cryptic but your real problem is you were missing a
-1/5value in your config:https://play.tailwindcss.com/wwZH8CHdeC?file=config
@adamwathan perhaps some more info might help point in the right direction, I’m also having this issue and it happens when trying to
@applya 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: Thetext-8\/2class does not exist, buttext-8/2does. If you’re sure thattext-8\/2exists, make sure that any@importstatements are being properly processed before Tailwind CSS sees your CSS, as@applycan 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.
I’ve experienced the same error, but enabling jit solved it for me
Oh, I’ve wrongly presumed tailwind automatically injects the negative value too. My bad 😅