Tailwind Regex List

A regex expressions for tailwind intellisense

Related Issue

Blog Post

Table of contents

• clsx
• HeadlessUI Transition (React)
• classnames
• Plain Javascript Object
• JavaScript string variable
• tailwind-rn
• cva
• classList
• tailwind-join
• tailwind-merge
• HAML
• JQuery
• DOM
• Comment Tagging
• Literally everywhere

clsx

clsx

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

# Take note of the outer square brackets!

clsx('p-4', 'text-center');

---

HeadlessUI Transition (React)

HeadlessUI React

"tailwindCSS.experimental.classRegex": [
  "(?:enter|leave)(?:From|To)?=\\s*(?:\"|'|{`)([^(?:\"|'|`})]*)"
 ]

<Transition
  enter="transition-opacity duration-75"
  enterFrom="opacity-0"
  enterTo="opacity-100"
  leave="transition-opacity duration-150"
  leaveFrom="opacity-100"
  leaveTo="opacity-0"
>
  I will fade in and out
</Transition>

---

classnames

classnames

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

# Take note of the outer square brackets!

classnames('bg-red-500', 'uppercase');

Credits: bradcl

---

Plain Javascript Object

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

const styles = {
  wrapper: 'flex flex-col',
  navItem: 'relative mb-2 md:mb-0',
  bullet: 'absolute w-2 h-2 2xl:w-4 2xl:h-4 bg-red rounded-full',
};

Credits: michaelschufi

---

JavaScript string variable

"tailwindCSS.experimental.classRegex": [
  "(?:const|let|var)\\s+[\\w$_][_\\w\\d]*\\s*=\\s*['\\\"](.*?)['\\\"]"
]

const inputClassNames = "scroll-m-0 border-collapse";

---

tailwind-rn

tailwind-rn

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

Note: You might have to add "style" to the Class Attributes setting of the Tailwind CSS Extension

Related: vadimdemedes/tailwind-rn#100 (comment)

tailwind('pt-12 items-center');

Credits: tommulkins

cva

class-variance-authority

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

# Take note of the outer square brackets!

cva("rounded", {
  variants: {
    size: {
      sm: "p-4",
      md: "p-6"
    }
  }
})

Credits: Joe Bell

classList

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

# Take note of the outer square brackets!

Credits: carere

tailwind-join

tailwind-join

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

# Take note of the outer square brackets!

Credits: satelllte

tailwind-merge

[tailwind-merge]

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

twMerge('p-8 rounded bg-slate-500', 'pt-10 bg-slate-800')

Credits: bradennapier

HAML

[HAML]

"tailwindCSS.experimental.classRegex": [
  [ "class: ?\"([^\"]*)\"", "([a-zA-Z0-9\\-:]+)" ],
  [ "(\\.[\\w\\-.]+)[\\n\\=\\{\\s]", "([\\w\\-]+)" ],
]

# Take note of the outer square brackets!

 %section.text-right.uppercase.font-extralight{class: "leading-[1.1rem]"} lorem

Credits: S1M1S

JQuery

"tailwindCSS.experimental.classRegex": [
  ["(?:add|remove)Class\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"]
]

# Take note of the outer square brackets!

$('body').addClass('bg-red-500');
$('body').removeClass('bg-red-500');

Credits: alexvipond

DOM

"tailwindCSS.experimental.classRegex": [
  ["classList.(?:add|remove)\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"]
]

# Take note of the outer square brackets!

document.body.classList.add('bg-red-500');
document.body.classList.remove('bg-red-500');

Credits: alexvipond

Comment Tagging

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

/** @tw */ "px-5 text-center bg-white py-16 &:not[hidden]"

Credits: james2doyle

EVERYWHERE!!!

For those who are just looking for a quick fix and want to enable tailwind intellisense everywhere.

"tailwindCSS.experimental.classRegex": [
  "([a-zA-Z0-9\\-:]+)"
]

pt-1
"pt-1"
const x = "pt-1"
// Will literally trigger everywhere

Note: The intellisense for tailwind will show up everytime you type a letter, so it might get annoying. Only use this if you are 100% sure!

Create an issue if you are trying to find a regex to match a certain pattern

Credits: Elbasel