Hint in custom places, attributes

[VottusCode]

This is a feature proposal for class hinting in other places than class|className.

Attributes

I'd like for custom html attributes to also have the hinting ability, maybe in .vscode/settings.json, there could be something like tailwindcss.attributes.custom: ["tw", "attr"].

One good example for this use case is props in modern JS frameworks, or twin.macro which has the custom tw attribute.

Custom Places

For example, by adding /* @tw */ in above line, it would indicate that the string below is supposed to be hinted, for example:

/* @tw */
const classes = "bg-"

Another way would be a shortcut to automatically trigger the hinting.

[pupupue]

Typescript

in typescript if variable/property has a specific type then enable hinting

type Tailwind = string
const classes: Tailwind = "bg-"

[VottusCode]

Typescript

in typescript if variable/property has a specific type then enable hinting

type Tailwind = string
const classes: Tailwind = "bg-"

Sounds nice, but what if a custom type needs to be applied?

Edit: Tailwind<T> or Tw<T> for short

[bradlc]

Hey @VottusCode. We have the tailwindCSS.experimental.classRegex setting already which allows you to define custom places where classes might be. For example to support your @tw idea, you can do:

"tailwindCSS.experimental.classRegex": [
  "/\\*\\s*@tw\\s*\\*/[^\"]+\"([^\"]*)\""
]

There's more information about this here: tailwindlabs/tailwindcss#7553

I do like the idea of having a setting for defining custom attribute names though!

[bradlc]

Based on this issue I have added the tailwindCSS.classAttributes setting in v0.7.1, so you can easily specific any custom attributes that contain classes 👍

[edgarasben]

@bradlc May I reopen this issue? I have a suggestion for the tailwindCSS.classAttributes setting. Could it include a wildcard option? So for example if I set "tailwindCSS.classAttributes": ["class", "className", "ngClass", "*Class"] then any of my html/jsx attributes ending with Class would get Tailwind hints?

I think this could be awesome, because I often build props such as columnsClass='sm:grid-cols-2 lg:grid-cols-4' to give my components a targeted styling.

EDIT: Uh, I did't see the thread about regex. This is what worked for my case: "tailwindCSS.experimental.classRegex": ["[a-zA-Z]*Class='([^']+)'"]

[mununki]

@bradlc I configure my vim setting with neovim/nvim-lspconfig as below. It works perfetctly.

require'lspconfig'.tailwindcss.setup{
  settings = {
    tailwindCSS = {
      experimental = {
        classRegex = { "%twc\\(\\s*\"([^\"]*)\"\\s*\\)" }
        } 
    }
  }
}

[lakardion]

@bradlc May I reopen this issue? I have a suggestion for the tailwindCSS.classAttributes setting. Could it include a wildcard option? So for example if I set "tailwindCSS.classAttributes": ["class", "className", "ngClass", "*Class"] then any of my html/jsx attributes ending with Class would get Tailwind hints?

I think this could be awesome, because I often build props such as columnsClass='sm:grid-cols-2 lg:grid-cols-4' to give my components a targeted styling.

EDIT: Uh, I did't see the thread about regex. This is what worked for my case: "tailwindCSS.experimental.classRegex": ["[a-zA-Z]*Class='([^']+)'"]

This looks good but seems like you need to start typing something for the regex to match. Do you know how we could make it match for empty string as well so that we get intellisense from the very beginning?

[Alfagun74]

@bradlc I configure my vim setting with neovim/nvim-lspconfig as below. It works perfetctly.

require'lspconfig'.tailwindcss.setup{
  settings = {
    tailwindCSS = {
      experimental = {
        classRegex = { "%twc\\(\\s*\"([^\"]*)\"\\s*\\)" }
        } 
    }
  }
}

This leads to css conficts for me, it thinks i have duplicate classes now in totally different html tags.

[SimplySayHi]

@bradlc May I reopen this issue? I have a suggestion for the tailwindCSS.classAttributes setting. Could it include a wildcard option? So for example if I set "tailwindCSS.classAttributes": ["class", "className", "ngClass", "*Class"] then any of my html/jsx attributes ending with Class would get Tailwind hints?

I think this could be awesome, because I often build props such as columnsClass='sm:grid-cols-2 lg:grid-cols-4' to give my components a targeted styling.

EDIT: Uh, I did't see the thread about regex. This is what worked for my case: "tailwindCSS.experimental.classRegex": ["[a-zA-Z]*Class='([^']+)'"]

This works great for me.
I needed an extended version for JSX ( to work with "" '' and {``} ) and I treid with
"tailwindCSS.experimental.classRegex": ["[a-zA-Z]*ClassName=(?:'([^']+)'|\"([^\"]+)\"|{([^`]+)`})"]but it did not work. I also tried asking ChatGPT and got this ( but not working )"tailwindCSS.experimental.classRegex": ["([a-zA-Z0-9-]+)ClassName=(?:"([^"])"|'([^'])'|{([^]+)})"].
Finally, I splitted my need in 3 regex and it worked:

"tailwindCSS.experimental.classRegex": [
        "[a-zA-Z]*ClassName='([^']+)'",
        "[a-zA-Z]*ClassName=\"([^\"]+)\"",
        "[a-zA-Z]*ClassName={`([^`]+)`}"
    ]

[abloom12]

Anyone know how I could get it working for adding tw via the className prop on an element?

[eslam-allam]

Anyone know how I could get it working for adding tw via the className prop on an element?

you can probably use a regex like this: "(?:[a-zA-Z].)+className\s*=\s*'([^']+)'"