Add intellisense when using classnames plugin

[davea38]

I write a lot of react code and use the https://github.com/JedWatson/classnames plugin for conditional CSS rendering.

Any chance you could enable this plugin to detect the classNames function?

import classNames from 'classnames';

<div className={classNames([
   'flex flex-col',
   ...
])} />

[0az]

I have my own minimalist version of this (const kn = (...classes) => classes.filter(e => !!e).flat().map(e => e + '').join(' ')), which works in enough cases for a copy/paste snippet in every project.

No idea what the low level parsing looks like, but detecting the class={}/class="" for Preact JSX or className={} for React JSX would probably suffice to support my use case as well: just enable the relevant completions inside every string in all such contexts.

[bradlc]

Hey @davea38! Any strings inside the class(Name) attribute should already trigger the completions:

Is this not working for you?

[kristiandupont]

@bradlc that's great if you call classNames inline. However, I frequently call it before the return statement. I too would love either a sophisticated detection of the classnames package or maybe something similar to what Headwind does.

[davea38]

Thanks for your reply @bradlc! As @kristiandupont points out, the majority of the time I am using classNames before a JSX return in a plain javascript function. It's less of a problem as I become more familiar with Tailwind, but my brain has a finite limit for the amount of 'stuff' it can hold... :)

Apologies that my example didn't actually cover the USE case that I wanted!

[eddyw]

You sort of can 😝. However, as soon as you format JS adding spaces between `=` char, it'll stop intellisense and the color decorations will disappear.

This "works" because of this:

tailwindcss-intellisense/src/lsp/providers/completionProvider.ts

Line 133 in b3fef94

const match = findLast(/(?:\b|:)class(?:Name)?=['"`{]/gi, str)

It'd be great if the RegExp allowed matching className( ) with parens. Then you could always do:

import { clsx as className } from './my-classNames-lib'

const styles = className({ white: 'text-white' }, 'bg-green-400')

[eddyw]

Since it's just a regular expression, you can use JS comments to make it match class={ } like this:

Anyways, it'd great if there was a better and official solution.

[bradlc]

Please see tailwindlabs/tailwindcss#7553, in particular my recent comment

[davea38]

@bradlc - thank you! Will try this feature out in the latest version :)