How to Integrate eslint-plugin-tailwindcss ?

[sohamnandi77]

How to integrate eslint-plugin-tailwindcss with create-t3-turbo ?

Thank you in advance!

[juliusmarminge]

can you elaborate what you've tried and what's not working? i tend to use the prettier plugin over the eslint one, and that just works after giving it the path to your config

[sohamnandi77]

Yes, Pretter plugin works, but it doesn't support some handy features like say
Converting h-4 w-4 to size-4

Here are some supported extra rules.
https://www.npmjs.com/package/eslint-plugin-tailwindcss

The problem I am facing is where to give the path to tailwind config. Should it be done in eslint tooling package or
Inside the apps eslint config?

[sohamnandi77]

@juliusmarminge , here is my config, it's not working yet

import path from "path";
import tailwindcssPlugin from "eslint-plugin-tailwindcss";

/** @type {Awaited<import('typescript-eslint').Config>} */
export default [
  {
    files: ["**/*.ts", "**/*.tsx"],
    plugins: {
      tailwindcss: tailwindcssPlugin,
    },
    settings: {
      tailwindcss: {
        callees: ["cn", "cva"],
        config: path.join(__dirname, "./tailwind.config.ts"),
      },
    },
  },
];

I tried directly using the config in apps, then it works, i am not able to figure out how to add it in common place

import tailwind from "eslint-plugin-tailwindcss";

import baseConfig, { restrictEnvAccess } from "@projects/eslint-config/base";
import drizzleConfig from "@projects/eslint-config/drizzle";
import nextjsConfig from "@projects/eslint-config/next";
import reactConfig from "@projects/eslint-config/react";

/** @type {import('typescript-eslint').Config} */
export default [
  {
    ignores: [".next/**"],
  },
  ...baseConfig,
  ...reactConfig,
  ...nextjsConfig,
  ...drizzleConfig,
  ...tailwind.configs["flat/recommended"],
  ...restrictEnvAccess,
];