A regex expressions for tailwind intellisense
- clsx
- HeadlessUI Transition (React)
- classnames
- Plain Javascript Object
- JavaScript string variable
- tailwind-rn
- cva
- classList
- tailwind-join
- tailwind-merge
- HAML
- JQuery
- DOM
- 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": [
"(?:const|let|var)\\s+[\\w$_][_\\w\\d]*\\s*=\\s*['\\\"](.*?)['\\\"]"
]const inputClassNames = "scroll-m-0 border-collapse";"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
[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)\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"]
]
# Take note of the outer square brackets!document.body.classList.add('bg-red-500');
document.body.classList.remove('bg-red-500');Credits: alexvipond
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent