Skip to content

[BUG] slots detected as classes #422

@BleedingDev

Description

@BleedingDev

Describe the bug
We use tailwind-variants with feature of slots. With beta version of plugin it incorrectly detects values there as invalid classes.

To Reproduce
Steps to reproduce the behavior:

  1. Use tailwind-variants.
  2. Define compoundSlots with slots and class keys inside the object.
  3. Detect bad classes
  4. Observe incorrect detection

Expected behavior
Detection only in classes, not somewhere else in tailwind-variants.

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please complete the following information):

  • OS: Mac OS 26
  • Softwares + version used:
    • VS Code + Terminal

Additional context

  compoundSlots: [
    {
      slots: ['autoplayTrigger', 'indicator', 'prevTrigger', 'nextTrigger'],
      class: [
        'p-carousel-trigger bg-carousel-trigger-bg',
        'focus:outline-none text-carousel-trigger-fg focus:ring-2 focus:ring-carousel-focus-ring focus:ring-offset-2',
      ],
    },
  ],
/libs/ui/src/molecules/carousel.tsx
  24:26  error  Classname 'scrollbar-hide' is not a Tailwind CSS class!   tailwindcss/no-custom-classname
  24:26  error  Classname 'autoplayTrigger' is not a Tailwind CSS class!  tailwindcss/no-custom-classname
  24:26  error  Classname 'indicator' is not a Tailwind CSS class!        tailwindcss/no-custom-classname
  24:26  error  Classname 'prevTrigger' is not a Tailwind CSS class!      tailwindcss/no-custom-classname
  24:26  error  Classname 'nextTrigger' is not a Tailwind CSS class!      tailwindcss/no-custom-classname

eslint config file or live demo
By providing a link to a live demo, a demo video or a github repo fixing the issue will be easier.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions