[IntelliSense] Custom class name completion contexts

[bradlc]

There has been quite a few requests for the extension to support class name completions in contexts other than a standard class(Name) attribute.

Some examples:

• tailwind.macro and twin.macro (Add scrolling-touch/auto docs #46, Support for tailwind.macro in styled/emotion like tw... or tw.div... tailwindcss-intellisense#123):

  tw`_`
  tw.div`_`
  <Component tw="_" />
  

• tailwind-rn (Add @important at-rule #99):

  tailwind('_')
  

• tailwind-ppx (Algolia's DocSearch ready! ✨ #120):

  <Component className=[%tw "_"] />
  

I just wanted to consolidate all of these requests into a single issue that can be tracked more easily, as I think the solution could be the same for each of them.

I am reluctant to hard-code each of these cases into the extension because none of them are "official" methods of using Tailwind, and it may become a maintenance burden.

However, I am open to the idea of adding a user setting which would allow the definition of custom regular expressions. For example for tailwind-rn your regular expression might be something like: /\btailwind\([^)]+/ig

If you're interested in this feature feel free to "watch" this issue for updates, and post any comments/suggestions you may have.

[oldo]

Using tailwind-rn I finally had success with the following:

"tailwindCSS.experimental.classRegex": ["tw\\('([^']*)'\\)"]

[J-Rigondo]

hello.
where is this code? tsconfig?

[Pefington]

settings.json in VSCode

[aquaductape]

For some reason this regex doesn't work

{
  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
  "tailwindCSS.experimental.classRegex": [
    "classList={{([^}]+)}}"
  ]
}

<button
  class="p-2 border border-gray-200 rounded-md"
  classList={{ 'p-4': isDark() }}
>
  Lesson
</button>

Then I had a thought that you can't intellisense object string keys, but you can using the class comment hack. So it is possible to intellisense object string keys.

```js
<button
  class="p-2 border border-gray-200 rounded-md"
  // class="
  classList={{ 'p-4': isDark() }}
  //"
>
  Lesson
</button>

So this regex should work as it does here https://regex101.com/r/5I3Fsb/1

[carere]

Hello, I may found a solution, you can try this regex, it works for me :)

{
  "tailwindCSS.experimental.classRegex": [
    ["classList={{([^;]*)}}", "\\s*?[\"'`]([^\"'`]*).*?:"]
  ]
}

Hope it helps ;)

[Axedyson]

Hey @bradlc I'm getting the following error:

Hovering, linting and autocompletion doesn't work for me. Does it have something to do with the limit? If so, can it be increased somehow?
The problem occurs in this repo: https://github.com/AndysonDK/syncbase/tree/59c7026584576f006925f6bcee60c80bd581dad9

• Should this be converted into it's own dedicated issue? I've done it just in case

[jussivirtanen]

I'm using Tailwind classes as strings stored into a variable:

const baseStyles = 'bg-green-700 text-white'

If you're using this convention, adding .*Styles* to the tailwindCSS.classAttributes in your VSCode settings.json should do the trick.

The setting

With the UI

With settings.json

The result

Hope this helps! :)

Edit: This approach also works with nested objects:

[prince272]

Added support for character quotes: ` " '

    ["\\S*[Cc]lass[nN]ame\\S* = \\[([\\s\\S]+?)(?=][\\n;.])", "[\"'`]([^\"'`]*).*?[\"'`]"],
    "\\S*[Cc]lass[nN]ame\\S* ?[:=] [\"'`](.*)[\"'`]",
    "return [\"'`](.*)[\"'`]",
    ["return \\(?{([\\s\\S]+?)}\\(?\\s", "[\"'`]([^']*)[\"'`]"],
    ["\\S*[Cc]lass[nN]ame\\S* = {([\\s\\S]+?)}\\s", "[\"'`]([^']*)[\"'`]"],

[ploca14]

This works for me in .ts files but it does not work in Vue <script setup lang="ts"> block. Is there a way to make it work in there too?

[filipbekic01]

Not working in script setup lang ts either.

[jdgamble555]

This is incorrect. This specifies attributes, not variable names for anyone who comes across this.

[deepfriedmind]

Did anyone make it work in <script setup lang="ts">?

[techno-disaster]

Quick question, any idea why code completion and hovering both work but linter does not? (have some typos in tailwind classes but the plugin can't detect them)

changes to settings

    "tailwindCSS.includeLanguages": {
        "dart": "javascript"
      },
    "tailwindCSS.experimental.classRegex": [
        "className\\:\\s*'([^']*)'",
    ]
    ```

[DennisRosen]

Hi, I just tried the classRegex setting mentioned here before in vs code:

"tailwindCSS.experimental.classRegex": [
  "tw`([^`]*)",
  ["classnames\\(([^)]*)\\)", "'([^']*)'"]
]

This works fine until I have a larger classnames call with lots of arguments/classes to apply, then the intellisense stops working around 1000 characters. Is it possible to overcome this limitation in vs code?

[uwemneku]

For react components, this regex works for component names ending with Class
"[a-zA-Z]*Class\\s?=\\s?[`|\"]([^`]*)"

[stillhart]

Just wanted to mention that for ruby / rails html.erb files the following configuration works. Locate the following configuration in Vscode:
Tailwind CSS › Experimental: Class Regex

Press Edit in settings.json and add this configuration

"tailwindCSS.experimental.classRegex": [
  "class: ['\"](.+?)['\"]" // class: "..." // ruby .html.erb    
],

Editing any erb files should now result in the following looks:

[DonHuskini]

I'm using it like this. IntelliSense works but auto-sorting does not. Does someone know why?

{
  "tailwindCSS.experimental.classRegex": [
    "\\/\\*\\s?tw:\\s?\\*\\/\\s?`(.*)`"
  ]
}

const classes = {
  root: /*tw:*/ `group inline-flex flex-col`,
  fullWidth: /*tw:*/ 'w-full',
  label: /*tw:*/ `mb-2 text-white`,
};

[jussivirtanen]

@depsimon, yes there is! Check my comment about using tailwindCSS.classAttributes. Here's the approach in action:

[depsimon]

Aha, it does work indeed, thanks :)
I can now remove the Regex I guess.

Though, when using with Typescript it seems it's ignored.

const variantThemeClasses: VariantThemes = {
  default: {
    primary: 'bg-gray-900 text-white',
    secondary: 'bg-gray-500 text-gray-900',
  },
  red: {
    primary: 'bg-red-500 text-white',
    secondary: 'bg-red-200 text-red-700'
  }
}

Do you have an idea to support that?

[jussivirtanen]

Great that you got it working! To get the same approach working with types, add this (or whatever naming scheme you're using) to your tailwindCSS.classAttributes:

  "tailwindCSS.classAttributes": [
    "class",
    "className",
    ...
    ".*Styles",
    ".*Styles: .*", <-- This should fix your issue.
  ],

Here's how it works on my setup:

[depsimon]

You're the boss. Thanks a lot

[jussivirtanen]

You're most welcome, glad I could help! 🤗

[chase-lambert]

Hey, thought I would share this for those who end up here when looking for a Clojure or ClojureScript solution like I did. Some nice folks on the Clojure slack helped me find this full solution that gives you autocompletion using both styles of hiccup (eg. [:h1 {:class "text-3xl font-extrabold mt-6"} "Hello, World!] and [:div.text-3xl.font-extrabold.mt-6 "Hello, World!]):

 "tailwindCSS.experimental.classRegex": [                                                       
    ":class\\s+\"([^\"]*)\"",                                                                    
    ":[\\w-.#>]+\\.([\\w-]*)"                                                                    
  ],                                                                                             
  "tailwindCSS.includeLanguages": {                                                              
    "clojure": "html"                                                                            
  }   

[Olical]

THANK YOU! 😄 my configuration looks like this now:

(lspconfig.tailwindcss.setup
  {:settings
   {:tailwindCSS
    {:experimental
     {:classRegex [":[\\w-.#>]+\\.([\\w-]*)"
                   "class\\s+\"([^\"]*)\""
                   "class\\s+\\[([^\\]]*)\\]"]}
     :includeLanguages {:clojure "html"}}}})

I've tweaked the regular expressions such that the following conditions all work:

(defn example []
  (let [item-class ["tw:capitalize"
                    "tw:px-5 tw:py-2 tw:text-base tw:flex"]]
    [:ul.tw:flex
     [:li {:class "tw:text-amber-300"} "foo"]
     [:li {:class ["tw:text-amber-300"
                   "tw:p-10"]}
      "bar"]
     [:li {:class item-class} "baz"]]))

Edit: And this may be even better! tailwindlabs/tailwindcss-intellisense#400 (comment)

Haha, I'm just following your footsteps, thanks for sharing all of this @chase-lambert - this one of yours looks like the ultimate one. I've just removed the : prefix so it works with let blocks where the binding ends with "class" which I like 😄

tailwindlabs/tailwindcss-intellisense#400 (comment)

And translated to Fennel:

(lspconfig.tailwindcss.setup
  {:settings
   {:tailwindCSS
    {:experimental
     {:classRegex [["\\[:[^.\\s]*((?:\\.[^.\\s\\]]*)+)[\\s\\]]" "\\.([^.]*)"]
                   ["\\:(\\.[^\\s#]+(?:\\.[^\\s#]+)*)" "\\.([^\\.\\s#]+)"]
                   ["class\\s+(\\:[^\\s\\}]*)[\\s\\}]" "[\\:.]([^.]*)"]
                   ["class\\s+(\"[^\\}\"]*)\"" "[\"\\s]([^\\s\"]*)"]
                   ["class\\s+\\[([\\s\\S]*)\\]" "[\"\\:]([^\\s\"]*)[\"]?"]
                   ["class\\s+'\\[([\\s\\S]*)\\]" "([^\\s]*)?"]]}
     :includeLanguages {:clojure "html"
                        :clojurescript "html"}}}})

[strativd]

Here's my VS Code settings.json to add Tailwind IntelliSense within objects and variables who's name ends with "Classes":

  "tailwindCSS.experimental.classRegex": [
    ["Classes \\=([^;]*);", "'([^']*)'"],
    ["Classes \\=([^;]*);", "\"([^\"]*)\""],
    ["Classes \\=([^;]*);", "\\`([^\\`]*)\\`"]
  ],

Tailwind IntelliSense will now recognize all of the following strings:

const defaultClasses = `text-grey`;

const componentClasses = {
  default: 'text-grey',
  danger: `text-red`,
  warning: "text-yellow",
};

Note: the regex matches code blocks that start with Classes = and ends with ; — you can replace Classes = with your own matcher to work with your own workflow :)

[johot]

Awesome! Thank you!

[TristanBrotherton]

Has anyone figured out a way to get the intellisense tooltips to display on tailwind classes in a TS variable?

[strativd]

Here's my example from stackoverflow. You can change the Regex in settings.json to match something other than Classes \\= — for typescript that might be Type \\= or Interface . GL!

[bradennapier]

Put together a few variations:

twMerge is tailwind-merge and supports the various strings and terminates properly when finished. It also works with twJoin which is a simple classnames like setup without processing the collisions.

/* tw */ can be used if wanting quick and dirty

twc (tailwind classes) is just :

/**
 * This is simply used to make it easier to write Tailwind classes that include
 * intellisense in various places
 */
export const twc = String.raw;

To make it easier when working with arbitrary value situations

"tailwindCSS.experimental.classRegex": [
    "\\/\\*\\s*tw\\s*\\*\\/\\s*[`'\"](.*)[`'\"];?",
    ["(?:twMerge|twJoin)\\(([^\\);]*)[\\);]", "[`'\"]([^'\"`,;]*)[`'\"]"],
    "twc\\`(.*)\\`;?"
  ],

[ackvf]

This will detect a container consisting of className = [] string and its variants such as ButtonClassNamesXyz Classname and whatever is inside [ ] will be processed. I have also added detection for ] inside the actual classname string.

  "tailwindCSS.experimental.classRegex": [
    ["\\S*[Cc]lass[nN]ame\\S* = \\[([\\s\\S]+?)(?=][\\s;,.])", "'([^']*)'"],
    "return '(.*)'",
  ],

Adjust regex here https://www.debuggex.com/r/yhCYrsFdzXRWQEhP

https://stackoverflow.com/questions/66614875/how-can-i-enable-tailwind-intellisense-outside-of-classname/74855906#74855906

[ackvf]

More advanced version

    ["\\S*[Cc]lass[nN]ame\\S* = \\[([\\s\\S]+?)(?=][\\n;.])", "'([^']*)'"],
    ["\\S*[Cc]lass[nN]ame\\S* = {([\\s\\S]+?)}\\s", "'([^']*)'"],
    "\\S*[Cc]lass[nN]ame\\S* ?[:=] ['`](.*)['`]",
    "return '(.*)'",
    ["return \\(?{([\\s\\S]+?)}\\(?\\s", "'([^']*)'"],
    ["twMerge\\(([\\s\\S]+?)\\)\\s", "'([^']*)'"],

[TristanBrotherton]

Can anyone confirm or deny that it is not possible to get the popover definition to display using any of these methods?

[jussivirtanen]

@TristanBrotherton, if you mean getting the Tailwind class autocompletion working, for example, with variables, then yes, that's doable! Here's a solution I'm using, maybe that helps?

[prestonbourne]

Has anyone managed to get this working with function args. I'm particularly looking for cva, clsx and classnames

[paolotiu]

You can find some examples here https://github.com/paolotiu/tailwind-intellisense-regex-list

[agusterodin]

Whatever you end up doing, it would be amazing if Prettier was able to pick up on the same pattern!

I am using "tailwindCSS.experimental.classRegex": ["*className"]

It works perfectly with the IntelliSense plugin (both for constants in files as well as component attributes) but doesn't get formatted by Prettier.

[Jorundur]

@agusterodin

Until the prettier tailwind plugin adds better support for this use case I have a temporary solution.

The plugin allows sorting of tagged template literals via templateFunctions.

I.e.

import tw from "twrnc";

function Button({ isHovering, children }) {
  let styles = tw`rounded py-2 px-4 text-base bg-blue-500 text-white hover:bg-blue-700`

  return <View style={styles}>{children}</View>;
}

with prettier.config.js as

module.exports = {
  ...something,
  tailwindFunctions: ['tw'],
};

I just created my own dummy tw tagged template literal function which accepts a template string and exports it as is:

/** A tagged template literal function which accepts a string and returns it un-modified.
 *
 * The purpose of this function is to sort strings containing Tailwind classes.
 * We can prepend "tw" to template strings that are intended as
 * Tailwind classes and allow the tailwind prettier plugin to sort it.
 *
 * I.e. Creating a variable like so:
 * const twClasses = tw`text-red-100 bg-white-100`;
 * will tell the tailwind prettier plugin to sort the classes.
 */
export const tw = (strings: TemplateStringsArray, ...values: string[]): string =>
  /**
   * The purpose of the reduce function is to make sure we can pass in a template string
   * with variables and get the correct result. I.e. `Hello I am ${name}`
   * will return `Hello I am Jörundur` if `name` is `Jörundur`.
   */
  strings.reduce((result, stringPart, i) => result + stringPart + (values[i] || ''), '');

Then I can use it like so:

import { tw } from './path/to/tw/function';

export const twClasses = tw`
  h-4
  w-full
  appearance-none
  rounded-2
  outline-none
  disabled:opacity-40
  [&::-moz-range-thumb]:h-24
  [&::-moz-range-thumb]:w-24
  [&::-moz-range-thumb]:rounded-full
  [&::-moz-range-thumb]:border-[3px]
  [&::-moz-range-thumb]:border-solid
  [&::-moz-range-thumb]:border-red-100
  [&::-moz-range-thumb]:bg-white-100
  [&::-moz-range-thumb]:transition-all
  [&::-moz-range-thumb]:hover:shadow-lg
  [&::-moz-range-thumb]:active:h-32
  [&::-moz-range-thumb]:active:w-32
  [&::-webkit-slider-thumb]:h-24
  [&::-webkit-slider-thumb]:w-24
  [&::-webkit-slider-thumb]:appearance-none
  [&::-webkit-slider-thumb]:rounded-full
  [&::-webkit-slider-thumb]:border-[3px]
  [&::-webkit-slider-thumb]:border-solid
  [&::-webkit-slider-thumb]:border-red-100
  [&::-webkit-slider-thumb]:bg-white-100
  [&::-webkit-slider-thumb]:transition-all
  [&::-webkit-slider-thumb]:hover:shadow-lg
  [&::-webkit-slider-thumb]:active:h-32
  [&::-webkit-slider-thumb]:active:w-32
`;

• Prettier plugin works - i.e. it automatically sorts these classes because it knows it should sort strings within template literal preceded by tw
• Tailwind intellisense plugin also works in VSCode via this setting in my Workspace settings for VSCode:

{
  ...
  "tailwindCSS.experimental.classRegex": ["\\S*Classes\\S* ?[:=] tw['`]((.|\\n)*)['`]"],
}

[agusterodin]

That's the solution I arrived at as well 😃

clsx (the conditional classname library) supports tagged template literals out of the box btw. I switched from classnames to clsx for this reason alone.

[Jorundur]

Cool! Does Intellisense work when using clsx out-of-the-box or did you need something in tailwindCSS.experimental.classRegex for that to work?

[agusterodin]

"tailwindCSS.experimental.classRegex": ["clsx`([^`]*)", ["clsx\\(([^)]*)\\)", "'([^']*)'"]],

[Jorundur]

If anyone else runs into this thread I'd like to add that my regex ended up like this:

"tailwindCSS.experimental.classRegex": [
    "clsx[`]([\\s\\S][^`]*)[`]",
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],

The second line is from the clsx docs, the first line is for the Intellisense recognizing tw classes inside a tagged template string like so:

export const classes = clsx`
  h-4
  w-full
  appearance-none
  rounded-2
  outline-none
  disabled:opacity-40
`;

[tsp1998]

For svelte users,

"tailwindCSS.experimental.classRegex": [
        "class:(.+)"
    ]

[Neo-Ciber94]

Want to point out you can use this as guide to create your custom regex:

https://github.com/paolotiu/tailwind-intellisense-regex-list

[mickaelchanrion]

Any reason this is not documented in the README? It took me some time to end up here 😅

[GabrielFNLima]

For those who use Webstorm, this worked for me.

Go to: Setting > Languages & Frameworks > Style Sheets > Tailwind CSS

At the bottom of the JSON configuration, you can add the regex

{
//...
 "experimental": {
    "classRegex": ["composes: ([^;]*)"]
  }
}

https://www.jetbrains.com/help/webstorm/tailwind-css.html

[miinabot]

I am reluctant to hard-code each of these cases into the extension because none of them are "official" methods of using Tailwind, and it may become a maintenance burden.

The official plugin prettier-plugin-tailwindcss actually does offer a solution for using functions like clsx classNames cva. This is accomplished by providing function names for which calls contain tailwind css.
https://www.npmjs.com/package/prettier-plugin-tailwindcss#sorting-classes-in-function-calls

Actually this is very helpful because in general function calls are not parsable using regular expressions, JS being an irregular language. It covers template literals as well (which are functions). This is very easy in prettier where an AST is already present, but is such a thing impossible in this plugin?

[Pentadome]

.vscode\settings.json

{
  "tailwindCSS.experimental.classRegex": [
    // Outer selector tw() - Inner selector '' or "" or ``
    ["tw\\(([^)]*)\\)", "(?:')([^']*)(?:')"],
    ["tw\\(([^)]*)\\)", "(?:\")([^\"]*)(?:\")"],
    ["tw\\(([^)]*)\\)", "(?:`)([^`]*)(?:`)"]
  ],
}

tw.ts

/**
 Use tailwind intellisense
 
 see: `.vscode\settings.json`
 regex defined by `tailwindCSS.experimental.classRegex`
 should match the literal string argument passed to this function.

 @returns the argument as is.
  */
export const tw = <T extends string>(classes: T) => classes;

.prettierrc

{
  "plugins": ["prettier-plugin-tailwindcss"],

  "tailwindFunctions": ["tw"]
}

package.json

{
  "devDependencies": {
    "prettier-plugin-tailwindcss": "latest",
  }
}

This setup works great. Hope this helps anyone

[smile-alive]

Hi, I’m using CDN to include Tailwind CSS in HTML, but I’m facing an issue with the lack of IntelliSense in VSCode. I’ve configured tailwind.config.js, which enables IntelliSense in

tags, but it doesn’t work in template strings. What should I do?

[fireMan-34]

Try to reload VSCode , extension server will reload config.

[ollyde]

For anyone else that's stuck with Expo and twrnc

Here is the config that finally works for me.

Workspace user settings

{
    "editor.quickSuggestions": {
      "strings": true
    },
    "tailwindCSS.experimental.classRegex": [
      ["tw`([^`]*)`"],
      ["style=\\{tw`([^`]*)`\\}"],
      ["style=\\{\\[tw`([^`]*)`"],
      ["tw\\(([^)]*)\\)"]
    ],
    "tailwindCSS.includeLanguages": {
      "typescript": "javascript",
      "typescriptreact": "javascript"
    },
    "tailwindCSS.classAttributes": [
      "class",
      "className",
      "style"
    ]
  }

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: [
    "./app/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // Wild Strawberry
        primary: {
          '50': '#fef1f8',
          '100': '#fde6f3',
          '200': '#fecce7',
          '300': '#fea3d2',
          '400': '#fc6ab3',
          '500': '#f63691',
          '600': '#e61c72',
          '700': '#c80e57',
          '800': '#a50f48',
          '900': '#8a1140',
          '950': '#550221'
        },
      }
    },
  },
  plugins: [],
}

tw.config.ts

import { create } from 'twrnc';

// Load from file
const tailwindConfig = require('@/tailwind.config.js');

const tw = create({
  theme: tailwindConfig.theme,
});

export default tw;

Now it works with

import tw from '@/app/utils/tw.config';

Additional files
postcss.config.js

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }

[abloom12]

Trying to get intellisense to work with element.className

Has anyone ran into this issue and had success in finding a solution?

[jucegt]

You can find the configuration for this in @paolotiu repository

In the DOM section

[gavin-c-tcg]

this is my setting

it can easy change Style and clsx to anything

  const g = {
    d: clsx("match ", { d: "match " }, "match "),
    dd: "not-match ",
  };
  const dClasses4 = "not-match ";
  const dStyle = "match ";
  const gStyle = {
    d: clsx("match", { d: "match" }),
    dd: "match",
  };
  const dClasses = "not-match ";
  const dClasses2 = clsx("match ", "match", { d: "match" });
  const dClasses = "not-match ";

 "tailwindCSS.experimental.classRegex": [
    ["Style\\s*=\\s*{(.*)};", ": \"([^\"]*)\""],
    ["Style\\s*=\\s*{([\\s\\S]*)};", "\\s*['\"`]([^'\"`]*)['\"`]"],
    "Style\\s*=\\s*['\"`]([^'\"`]*)['\"`];",
    ["clsx\\(([^)]*)\\)", "\"([^\"]*)\""]
  ]

[ghost]

Thanks to @gavin-c-tcg.

Personally I adapted his regex to also work with typescript types:

 "tailwindCSS.experimental.classRegex": [
        ["Style\\s*(?::[^=]*)?=\\s*{(.*)};", ": \"([^\"]*)\""],
        ["Style\\s*(?::[^=]*)?=\\s*{([\\s\\S]*)};", "\\s*['\"`]([^'\"`]*)['\"`]"],
        "Style\\s*(?::[^=]*)?=\\s*['\"`]([^'\"`]*)['\"`];"
    ]

[rozsazoltan]

From TailwindCSS IntelliSense v0.14.10

For the TailwindCSS IntelliSense to work within the tw function added by twrnc, you need to add the function name to tailwindCSS.classFunctions, like this:

{
  "tailwindCSS.classFunctions": ["tw"]
}

• PR #1258: Add tailwindCSS.classFunctions setting
• Avaliable from v0.14.10 (2025-03-20)

Note: This only replaces classRegex; however, using classAttributes alongside it is still recommended.

Until TailwindCSS IntelliSense v0.14.9

However, if you want it to work in the style attribute within an HTML structure, you need to add the following alongside the default class and className:

{
  "tailwindCSS.classAttributes": [
    // ...
    "style"
  ],
}

Additionally, you can use the classRegex expression you mentioned to declare the hint to be requested when calling the function, based on twrnc's recommendation:

{
  "tailwindCSS.experimental.classRegex": [
    "tw`([^`]*)",
    ["tw.style\\(([^)]*)\\)", "'([^']*)'"]
  ]
}

• twrnc's settings for TailwindCSS IntelliSense v0.14.9

• How to Get TailwindCSS IntelliSense for twrnc in VSCode?

[sabeerbikba]

{
  "tailwindCSS.experimental.classRegex": [
    ["(?:class|className|class-name)\\s*=\\s*\"([^\"]*)\"", 1],
    ["(?:class|className|class-name)\\s*=\\s*`([^`]*)`", 1],
    ["tw\\(([^)]*)\\)", 1]
  ],
}

it work's for

<CustomDevOnly className="fixed top-4">
       {{ ... }}}
</CustomDevOnly>

and won't work for this one

<CustomDevOnly class-name="fixed top-4">
       {{ ... }}}
</CustomDevOnly>

[rozsazoltan]

Recommended

class and className work out of the box, so I wouldn’t burden the regex with that. So className didn't work because of the regex, but work by default. So instead of using regex, you just need to declare the class-name - though it's better to do that in

{
  "tailwindCSS.classAttributes": ["class-name"],
}

As for functions, a newly introduced property might be a better fit:

{
  "tailwindCSS.classFunctions": ["tw"],
}

Source:

• [IntelliSense] Custom class name completion contexts #7554 (comment)
• How to Get TailwindCSS IntelliSense for twrnc in VSCode?

Just a curiosity

For working regex expressions written by others, see:

• Displaying color boxes next to the TailwindCSS class names indicating the color, anywhere such as in class or className attributes
• paolotiu/tailwind-intellisense-regex-list

If you still want to solve the class-name issue using regex, then do it like this:

{
  "tailwindCSS.experimental.classRegex": [
    "(?:class-name)=\\s*(?:\"|'|{`)([^(?:\"|'|`})]*)",
  ],
}

If you still want to solve the tw() or clsx() or cn() function issue using regex:

{
  "tailwindCSS.experimental.classRegex": [
    ["(?:tw|clsx|cn)\\(([^;]*)[\\);]", "[`'\"`]([^'\"`;]*)[`'\"`]"],
  ],
}

[sabeerbikba]

{
  "tailwindCSS.experimental.classRegex": [
    "(?:class-name)=\\s*(?:\"|'|{`)([^(?:\"|'|`})]*)",
  ],
}

This line worked thanks.

[callmesangio]

Hi,

does anybody use the language server via Zed and with Ruby?
I'm trying to make it work but could not figure out the proper regex to match string array syntax (e.g. %w[ pt-1 ]).

Relevant part of settings.json:

"lsp": {
  "tailwindcss-language-server": {
    "settings": {
      "includeLanguages": {
        "ruby": "html",
      },
      "experimental": {
        "classRegex": [
          "\\bclass:\\s*%w\\[\\s*([^\\]]*)\\s*\\]", // <- this does not work
          "\\bclass:\\s*['\"]([^'\"]*)['\"]",
        ],
      },
    },
  },
},

The regular expression should be good (https://regex101.com/r/Q6pObz/1), but still, intellisense works only within strings.

Thanks!