Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Using arbitrary values like `*-[color]/alpha` in the class name causes an error in the "tailwindcss/no-custom-classname" rule

See original GitHub issue

Describe the bug I add the class bg-[#ccc]/75 and get an error:

Expected behavior There should be no error. If I add the class like bg-[#ccc]/[75%] then get no error, but the class like bg-[#ccc]/75 should also work correctly.

Environment (please complete the following information):

OS: macOS 12.2.1
Softwares + version used:
- VSCode 1.64.0
- eslint-plugin-tailwindcss 3.5.0
- tailwindcss 3.0.23
- npm 8.1.0
- node v16.13.0

eslint config file or live demo https://play.tailwindcss.com/fezYYq7F1Z

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:11 (5 by maintainers)

Top GitHub Comments

2reactions

francoismassartcommented, Jun 27, 2022

@taigakiyokawa & @asharonbaltazar can you

npm i eslint-plugin-tailwindcss@3.6.0-beta.1 and confirm it fixes your issues ?

Thanks

2reactions

asharonbaltazarcommented, Apr 26, 2022

Hey, loving your lib. Just jumping on this issue to say that this an issue with stroke-[val] as well.

Screen Shot 2022-04-26 at 2 23 04 PM

Top Results From Across the Web

eslint-plugin-tailwindcss/no-arbitrary-value.md at master

Arbitrary values are great but can be problematic too if you wish to restrict developer to stick with the values defined in the...

Adding Custom Styles - Tailwind CSS

This guide covers topics like customizing your design tokens, how to break out of those constraints when necessary, adding your own custom CSS,...

Just-in-Time Mode - Tailwind CSS

Generate arbitrary styles without writing custom CSS. ... To use arbitrary values like this in your class names, you need to remove the...

Content Configuration - Tailwind CSS

Configuring source paths. Tailwind CSS works by scanning all of your HTML, JavaScript components, and any other template files for class names, ...

Configuration - Tailwind CSS

Creating your configuration file. Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the tailwindcss...