Skip to content

Conversation

@edgarlr
Copy link
Contributor

@edgarlr edgarlr commented Jan 18, 2023

Add documentation on how to enable Tailwind IntelliSense inside clsx functions

Fixes #64

Add documentation on how to enable Tailwind IntelliSense inside `clsx` functions

Fixes lukeed#64
Copy link
Owner

@lukeed lukeed left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Can you move this section between Support and Related?

edgarlr and others added 2 commits January 18, 2023 16:51
@edgarlr
Copy link
Contributor Author

edgarlr commented Jan 18, 2023

@lukeed Done!

@lukeed
Copy link
Owner

lukeed commented Jan 18, 2023

Thanks :)

@lukeed lukeed merged commit 496db1d into lukeed:master Jan 18, 2023
```json
{
"tailwindCSS.experimental.classRegex": [
["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
Copy link

@kachkaev kachkaev Jul 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👋 @lukeed! Thanks for adding this regex! Can you please elaborate on your approach to building it? I was using https://github.com/shadcn/ui/blob/5e172fc34fdf015aa0d141f52cc8c082b8ae6613/.vscode/settings.json#L7-L8 before seeing your solution. There is a slight difference, so I'm curious if there are any edge cases not covered by any of the two regexps:

shadcn/ui
- ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+ ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
your regex

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@edgarlr contributed this section so perhaps they can offer an explanation.

By eyeballing it, the difference is that ([^']*) will match anything up to ', which means that if " or or backticks appear in the class value, then the regexp in our docs will include it as part of the value, whereas the other regexp stops there.

clsx doc's regexp
Screen Shot 2023-07-18 at 10 43 53 AM

shadcn/ui regexp
Screen Shot 2023-07-18 at 10 44 16 AM

Looks like they're both not ideal, tbh
I don't use this extension, but perhaps something like this is better? I don't know if the extn is looking for the first matching group only, though

Screen Shot 2023-07-18 at 10 53 57 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add documentation on usage with Tailwind CSS

3 participants