A regex expressions for tailwind intellisense
- 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
"tailwindCSS.experimental.classRegex": [
["clsx\\(.*?\\)(?!\\])", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"]
]
# Take note of the outer square brackets!clsx('p-4', 'text-center');"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>"tailwindCSS.experimental.classRegex": [
["classnames\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"]
]
# Take note of the outer square brackets!classnames('bg-red-500', 'uppercase');Credits: bradcl
"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
"tailwindCSS.experimental.classRegex": [
[
"classNames:\\s*{([\\s\\S]*?)}",
"\\s?[\\w].*:\\s*?[\"'`]([^\"'`]*).*?,?\\s?"
]
]const props = {
classNames: {
container: "w-full h-full"
}
}"tailwindCSS.experimental.classRegex": [
"(?:const|let|var)\\s+[\\w$_][_\\w\\d]*\\s*=\\s*['\\\"](.*?)['\\\"]"
]const inputClassNames = "scroll-m-0 border-collapse";"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
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
"tailwindCSS.experimental.classRegex": [
"tailwind\\('([^)]*)\\')", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"
]Note: You might have to add "style" to the
Class Attributessetting of the Tailwind CSS Extension
tailwind('pt-12 items-center');Credits: tommulkins
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
# Take note of the outer square brackets!cva("rounded", {
variants: {
size: {
sm: "p-4",
md: "p-6"
}
}
})Credits: Joe Bell
"tailwindCSS.experimental.classRegex": [
["classList={{([^;]*)}}", "\\s*?[\"'`]([^\"'`]*).*?:"]
]
# Take note of the outer square brackets!Credits: carere
"tailwindCSS.experimental.classRegex": [
["twJoin\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"]
]
# Take note of the outer square brackets!Credits: satelllte
[tailwind-merge]
"tailwindCSS.experimental.classRegex": [
["(?:twMerge|twJoin)\\(([^;]*)[\\);]", "[`'\"`]([^'\"`;]*)[`'\"`]"]
] twMerge('p-8 rounded bg-slate-500', 'pt-10 bg-slate-800')Credits: bradennapier
"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]
"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]"} loremCredits: S1M1S
"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
"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
"tailwindCSS.experimental.classRegex": [
"@tw\\s\\*\/\\s+[\"'`]([^\"'`]*)"
]/** @tw */ "px-5 text-center bg-white py-16 &:not[hidden]"Credits: james2doyle
"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
"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>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 everywhereNote: 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