idered / eslint-plugin-tailwind

ESLint rules for Tailwind CSS

kasper.io

Hey there, I'm Kasper Mikiewicz and this is source of my personal blog.

I've used:

• Surge - Free publishing platform for static sites
• Hexo - Static site generator (It's superb!)
• Jade as templating engine
• SCSS with BEMIT methodology

eslint-plugin-tailwind's Issues

Eslint config not detecting tailwind.config

Im having problems setting up tailwind on my React project. I am using eslint, and I wanted to add tailwind and asked me to add it as a project, but then it says it is not correct.
This is the error:

This is my eslint config:

Missing ESLint ^8.0.0 Peer Dependancy

When running [email protected] along with eslint@^8.0.0 we get the following error when running npm i

npm ERR! peer eslint@"^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" from [email protected]

Any chance that this can be patched?

Twin-macro support

Hi! Do you support uses with tagged literals like tw``m-sm` ` used on twin.macro?

Prefer theme() over @apply

According to this tweet, theme() is less error-prone than @apply: https://twitter.com/adamwathan/status/1226511611592085504

@adamwathan is this still the case in Tailwind 2? If so, I think an ESLint rule in this library could help warn users about this and it would be really useful if eslint --fix could apply a proper codemod to automagically convert from theme() to @apply

(I might be able to push a PR for this)

incorrect peer dependency

warning " > [email protected]" has incorrect peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0".

I am using eslint^7.0.0

Support prefixed classes

I am using _ prefix and it seems the plugin doesn't recognize the resulting classes like _mr-2.
Can support for prefixes be added?

Support for Tailwind classes in function calls

I love this plugin has changed my workflow a ton and puts some accountability across the team rather than relying on a hyper-local workflow via headwind. Would love to see more dynamic support for this plugin.

ie:

export const Button = ({ label, primary = true, backgroundColor, iconName, ...rest }: ButtonProps) => {
  return (
    <button
      type='submit'
      className={classNames(
        primary ? 'border-transparent bg-blue fill-white text-white hover:bg-blue-600' : 'border-blue bg-white fill-blue text-blue',
        'inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500',
      )}
      style={{ backgroundColor }}
      {...rest}
    >
      {iconName && <Icon name={iconName} className='w-5 h-5 mr-3 -ml-1' aria-hidden='true' isSolid />}
      {label}
    </button>
  );
};

Would be awesome if the Tailwind classes inside the classNames func would also get sorted like they would if they were not dynamic.

Svelte support

I would like this plugin to have support for .svelte files
The .svelte files are very similar to .html