JS / TS Support

[blowsie]

I was hoping to use the plugin in ts / js files, using CVA or one of its many variants, can i configure the plugin to support that?

[schoero]

Yes, this works out of the box with the latest version. Do you need more specific help, or are you having trouble getting it to work?

[blowsie]

Well, the readme mentions parsers, but doesnt mention how to use it on a ts / js file.

Parsers
Depending on the flavor you are using, you need to install and configure the corresponding parser:

JSX/TSX: React, Qwik, Solid etc.
Svelte
Vue
HTML

Example file, ts

import { tv, type VariantProps } from 'tailwind-variants'

export { default as Button} from './Button.vue'

export const buttonVariants = tv({
  slots: {
    base: 'ui-button inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
    loadingIcon: 'ui-button__loading-icon i-rmt4-spinner ml-2 animate-spin text-lg ',
  },

  variants: {
    variant: {
      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
      outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
      ghost: 'hover:bg-accent hover:text-accent-foreground',
      link: 'text-primary underline-offset-4 hover:underline',
    },
    size: {
      default: 'h-10 px-4 py-2',
      xs: {
        base: 'h-7 rounded bg-red-500 px-2',
        loadingIcon: 'ml-1',
      },
      sm: {
        base: 'h-9 rounded-md px-3',
        loadingIcon: 'ml-2',
      },
      lg: { base: 'h-11 rounded-md px-8', loadingIcon: 'ml-4' },
      icon: 'h-10 w-10',
    },
  },
  defaultVariants: {
    variant: 'default',
    size: 'default',
  },
})

export type ButtonVariants = VariantProps<typeof buttonVariants>

[schoero]

For a JavaScript file, no special parsers are necessary. The only thing necessary is to include the plugin and the rules in your eslint config:

// eslint.config.js

import eslintPluginReadableTailwind from "eslint-plugin-readable-tailwind";

export default [
  {
    plugins: {
      "readable-tailwind": eslintPluginReadableTailwind
    },
    rules: {
      ...eslintPluginReadableTailwind.configs.warning.rules,
    }
  }
];

For TypeScript files, the @typescript-eslint/parser is actually necessary.

// eslint.config.js

import eslintPluginReadableTailwind from "eslint-plugin-readable-tailwind"
import eslintParserTypeScript from "@typescript-eslint/parser"

export default [
  {
    languageOptions: {
      parser: eslintParserTypeScript,
      parserOptions: {
        project: true
      }
    },
    files: ["**/*.{ts,tsx,cts}"],
  },
  {
    plugins: {
      "readable-tailwind": eslintPluginReadableTailwind
    },
    rules: {
      ...eslintPluginReadableTailwind.configs.warning.rules,
    }
  }
];

I will update the documentation to also mention how to parse plain JavaScript and TypeScript files.