From a48ae09a4b1f67dd93c5a4e001c1f6c2707f3923 Mon Sep 17 00:00:00 2001 From: Jacek Tomaszewski Date: Thu, 24 Apr 2025 09:59:15 +0200 Subject: [PATCH] docs: document how `eslint-plugin-tailwindcss` can be configured for gluestack P.S. It also can sort classes, just as prettier plugin does, but also more, e.g. yell about nonexistent classnames. --- .../tooling-setup/index.nw.stories.mdx | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/home/getting-started/tooling-setup/index.nw.stories.mdx b/example/storybook-nativewind/src/home/getting-started/tooling-setup/index.nw.stories.mdx index 90d117384..7dee520ef 100644 --- a/example/storybook-nativewind/src/home/getting-started/tooling-setup/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/getting-started/tooling-setup/index.nw.stories.mdx @@ -25,7 +25,7 @@ If you are using VSCode and the [Tailwind CSS IntelliSense Extension](https://ma ## Prettier plugin setup (optional) -If you are using [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) to sort your class names, you can add tv to the list of functions that should be sorted (on `.prettierrc`). +If you are using [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) to sort your class names, you can add `tva` to the list of functions that should be sorted (in `.prettierrc`). ```jsx module.exports = { @@ -33,3 +33,21 @@ module.exports = { tailwindFunctions: ['tva'], }; ``` + +## ESlint plugin setup (optional) + +If you are using [eslint-plugin-tailwindcss](https://github.com/francoismassart/eslint-plugin-tailwindcss) to lint your class names, you can add `tva` to the list of functions that should be linted (in `.eslintrc.js`). + +```jsx +module.exports = { + extends: [ + "expo", + "plugin:tailwindcss/recommended", + ], + settings: { + tailwindcss: { + callees: ["classnames", "clsx", "ctl", "tva"], + }, + }, +}; +```