eslint-plugin-tailwindcss icon indicating copy to clipboard operation
eslint-plugin-tailwindcss copied to clipboard

[BUG] Issue with `placeholder-[#XXXXX]`

Open slauzinho opened this issue 1 year ago • 0 comments

Describe the bug A clear and concise description of what the bug is.

To Reproduce Steps to reproduce the behavior:

  1. Use custom class placeholder-[#806E61]
  2. 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 CleanShot 2023-10-04 at 11 27 22

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

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,
  },
};

slauzinho avatar Oct 04 '23 10:10 slauzinho