eslint-plugin-tailwindcss
eslint-plugin-tailwindcss copied to clipboard
[BUG] Issue with `placeholder-[#XXXXX]`
Describe the bug A clear and concise description of what the bug is.
To Reproduce Steps to reproduce the behavior:
- Use custom class
placeholder-[#806E61]
- The linter shows warning:
Classname 'placeholder-[#806E61]' should be updated to 'placeholder-[#806E61]' in Tailwind CSS v3!
Expected behavior Shouldn't have any error
Screenshots
Environment (please complete the following information):
- OS: macOS
- Softwares + version used:
- VSCode:
1.82.3
- eslint-plugin-tailwindcss:
3.13.0
- eslint:
^7.32.0
- VSCode:
Additional context Add any other context about the problem here.
eslint config file or live demo
module.exports = {
env: { browser: true, es2021: true, node: true },
extends: [
'plugin:vue/vue3-recommended',
'plugin:vuejs-accessibility/recommended',
'eslint:recommended',
'@vue/typescript/recommended',
'prettier',
'plugin:tailwindcss/recommended',
],
rules: {
'tailwindcss/no-custom-classname': [
'error',
{
whitelist: [
'filter-nav-right',
'filter-nav-left',
'hidden-title',
'scrollbar-thin',
'scrollbar-track-gray-100',
'scrollbar-thumb-terracota-dark',
],
},
],
'tailwindcss/classnames-order': 'off',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/no-unused-vars': 'error',
'vue/no-v-html': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/ban-types': 'off',
'vue/multi-word-component-names': 'off',
'no-undef': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'vue/component-name-in-template-casing': [
'error',
'PascalCase',
{ registeredComponentsOnly: true, ignores: [] },
],
'vuejs-accessibility/label-has-for': [
'error',
{
components: ['VLabel'],
controlComponents: ['VInput'],
required: {
some: ['nesting', 'id'],
},
allowChildren: false,
},
],
'vue/first-attribute-linebreak': 'off',
},
parserOptions: { ecmaVersion: 2021 },
plugins: ['vue', 'vuejs-accessibility', 'tailwindcss'],
globals: {
defineEmits: true,
defineProps: true,
withDefaults: true,
},
};