search

francoismassart / eslint-plugin-tailwindcss

ESLint plugin for Tailwind CSS usage
https://www.npmjs.com/package/eslint-plugin-tailwindcss
MIT License
1.44k stars 66 forks source link

[BUG] bg-opacity/[value] doesn't work #196

Open dolanmiu opened 1 year ago

dolanmiu commented 1 year ago

Describe the bug bg-opacity/70 or any of its variants do not work:

Classname 'bg-opacity/70' is not a Tailwind CSS class!
eslint[tailwindcss/no-custom-classname](https://github.com/francoismassart/eslint-plugin-tailwindcss/tree/master/docs/rules/no-custom-classname.md)

image

The TailwindCSS 2 version works though, but it tells me to change it to bg-opacity/70! I am so confused. i don't know why its like this or why it's happening

Classname 'bg-opacity-70' should be replaced by an opacity suffix (eg. '/70')
eslint[tailwindcss/migration-from-tailwind-2](https://github.com/francoismassart/eslint-plugin-tailwindcss/tree/master/docs/rules/migration-from-tailwind-2.md)

image

To Reproduce Steps to reproduce the behavior:

  1. Use bg-opacity/70 in your html template of your choice
  2. Try using bg-opacity-70
samdoidge commented 8 months ago

The message could be clearer. For your example using bg-black/70 and removing bg-opacity-70 should resolve the issue.