README.md

Tailwind Regex List

A regex expressions for tailwind intellisense

Related Issue

Blog Post

Table of contents

• clsx
• HeadlessUI Transition (React)
• classnames
• Plain Javascript Object
• Nested Object
• JavaScript string variable
• JavaScript string variable with keywords
• TypeScript or JavaScript variables, strings or arrays with keyword
• tailwind-rn
• cva
• classList
• tailwind-join
• tailwind-merge
• tailwind-variants
• HAML
• JQuery
• DOM
• Comment Tagging
• Laravel Blade directives and component attribute functions
• Stimulus CSS Classes
• 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

---

Nested object inside a plain javascript object

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

const props = {
    classNames: {
      container: "w-full h-full"
   }
}

---

JavaScript string variable

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

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

---

JavaScript string variable with keywords

"tailwindCSS.experimental.classRegex": [
  ["(?:\\b(?:const|let|var)\\s+)?[\\w$_]*(?:[Ss]tyles|[Cc]lasses|[Cc]lassnames)[\\w\\d]*\\s*(?:=|\\+=)\\s*['\"]([^'\"]*)['\"]"]
]

const styles = "bg-red-500 text-white";
let Classes = "p-4 rounded";
var classnames = "flex justify-center";
const buttonStyles = "bg-blue-500 hover:bg-blue-700";
let formClasses = "space-y-4";
var inputClassnames = "border-2 border-gray-300";
styles += 'rounded';

Credits: mxmalykhin

---

TypeScript or JavaScript variables, strings or arrays with keyword

Captures Tailwind classes based on the following patterns:

• variables ending with a "Styles" suffix and with or without TS types.
• classes within single quotes, double quotes, or backticks
• classes within strings or arrays

Edit Styles keyword to target different variable names/suffixes

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

Examples:

const variableStyles: (string | undefined)[] = [
  className,
  showCaret ? 'pr-1' : '',
  icon ? 'px-1.5 py-0.5' : 'px-3 py-1',
];

const baseStyles = `items-center flex p-5 mx-2 my-1`;

Credits: avgvstvs96

---

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

tailwind-variants

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

# Take note of the outer square brackets!

tv({
  base: 'bg-gray-500 grid grid-cols-1 gap-0 tablet:grid-cols-2 mx-auto my-0 p-0 w-full',
  variants: {
    threeColumn: {
      true: 'three-column grid-cols-3 tablet:grid-cols-3 mb-2'
    },
    twoColumn: {
      true: 'grid-cols-2'
    }
  }
})

Credits: magicink

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|toggle)\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"]
]

# Take note of the outer square brackets!

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

Credits: alexvipond

"tailwindCSS.experimental.classRegex": [
  ["\\s*.className\\s*=\\s*['\\\"](.*?)['\\\"]"]
]

# Take note of the outer square brackets!

document.body.className = 'bg-red-500';
yourCustumEl.className = 'bg-red-500';

Credits: dennisdotg

Comment Tagging

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

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

Credits: james2doyle

Laravel Blade directives and component attribute functions

Laravel Blade Templates

"tailwindCSS.experimental.classRegex": [
  ["@?class\\(([^)]*)\\)", "['|\"]([^'\"]*)['|\"]"],
  "(?:\"|')class(?:\"|')[\\s]*=>[\\s]*(?:\"|')([^\"']*)"
]

@class(['bg-red-500', 'text-white'])
$attributes->class(['bg-red-500', 'text-white'])
$attributes->merge(['class' => 'bg-red-500 text-white'])

Credits: czernika and Nicholas Davidson

Stimulus CSS Classes

Stimulus CSS Classes

"tailwindCSS.experimental.classRegex": [
  ["data-.*-class=['\"]([^'\"]*)"]
]

<form data-controller="search"
      data-search-loading-class="bg-gray-500 animate-spinner cursor-busy">
  <input data-action="search#loadResults">
</form>

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