Use @apply in LESS, If prefix-[Arbitrary values] is not after prefix-[color] ，Throw error：The h- class does not exist..😥

[dabaii]

What version of Tailwind CSS are you using?

"tailwindcss": "^3.1.4",

What build tool (or framework if it abstracts the build tool) are you using?

"vite": "^2.9.9",

What version of Node.js are you using?

node -v
v16.14.2

What browser are you using?

Microsoft Edge 103.0.1264.37
Google Chrome 103.0.5060.66

What operating system are you using?

Windows 21H2

Reproduction URL
https://stackblitz.com/edit/vitejs-vite-kkgwzn?file=src%2FApp.vue

Describe your issue

in Less：
“h-[100px] ” not in the first position,This program works properly。

.box1 {
  @apply bg-[#074f51] h-[100px]; // is ok
}

“h-60” is in the first position, but not ‘h-[]’,This program works properly。

.box2 {
  color: #fff;
  @apply h-60 bg-[#074f51]; // is ok
}

“h-[]” is in the first position, Throw error：The h- class does not exist. If h- is a custom class, make sure it is defined within a @layer directive.

.box3 {
  color: #fff;
  @apply h-[100px] bg-[#074f51]; 
}

Other examples

 @apply text-[#074f51] h-[100px] ;  // ok

@apply text-white m-[5px]; // error

@apply h-[100px] text-[#074f51]  ;  // error

@apply m-[100px] text-[#074f51]  ;  // error

🐼Only # after prefix-[Arbitrary values] is error free.

[adamwathan]

Looks like Less just doesn't understand our syntax there. It works if you use the escaping syntax to make sure Less doesn't try to parse that code:

https://lesscss.org/#escaping

.box3 {
  color: #fff;
  @apply ~"h-[100px] bg-[#074f51]";
}

Nothing we can do about this in Tailwind I'm afraid, the issue is that Less can't parse that code without the escaping stuff so something would need to change in Less and I don't expect they really are going to want to do that either. So I would use the escaping syntax if you have to use Less, but ultimately I would recommend not using a preprocessor at all and just using PostCSS:

https://tailwindcss.com/docs/using-with-preprocessors#using-post-css-as-your-preprocessor

[dabaii]

👍👍👍👍👍👍👍