├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Paolo Tiu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Tailwind Regex List 2 | 3 | A regex expressions for tailwind intellisense 4 | 5 | [Related Issue](https://github.com/tailwindlabs/tailwindcss-intellisense/issues/129) 6 | 7 | [Blog Post](https://www.paolotiu.com/blog/get-tailwind-intellisense-anywhere) 8 | 9 | ### Table of contents 10 | - [String Endings](#string-endings) 11 | - [clsx](#clsx) 12 | - [HeadlessUI Transition (React)](#headlessui-transition-react) 13 | - [classnames](#classnames) 14 | - [Plain Javascript Object](#plain-javascript-object) 15 | - [Nested Object](#nested-object-inside-a-plain-javascript-object) 16 | - [JavaScript string variable](#javascript-string-variable) 17 | - [JavaScript string variable with keywords](#javascript-string-variable-with-keywords) 18 | - [TypeScript or JavaScript variables, strings or arrays with keyword](#typescript-or-javascript-variables-strings-or-arrays-with-keyword) 19 | - [tailwind-rn](#tailwind-rn) 20 | - [cva](#cva) 21 | - [classList](#classlist) 22 | - [tailwind-join](#tailwind-join) 23 | - [tailwind-merge](#tailwind-merge) 24 | - [tailwind-variants](#tailwind-variants) 25 | - [HAML](#haml) 26 | - [JQuery](#jquery) 27 | - [DOM](#dom) 28 | - [Comment Tagging](#comment-tagging) 29 | - [Laravel Blade directives and component attribute functions](#laravel-blade-directives-and-component-attribute-functions) 30 | - [Stimulus CSS Classes](#stimulus-css-classes) 31 | - [Tagged Template Literals](#tagged-template-literals) 32 | - [Literally everywhere](#everywhere) 33 | 34 | #### String Endings (most useful) 35 | this will match all strings in your code that ends with any of `Style`, `ClassName` and `ClassNames`. 36 | i.e `const mainStyle = "..."`, `const mainClassName = "..."` and `const classNames = "..."` 37 | ```json 38 | "tailwindCSS.experimental.classRegex": [ 39 | ["\\b\\w*Style\\b\\s*=\\s*[\"'`]([^\"'`]*)[\"'`]"], 40 | ["\\b\\w*ClassName\\b\\s*=\\s*[\"'`]([^\"'`]*)[\"'`]"], 41 | ["\\b\\w*ClassNames\\b\\s*=\\s*[\"'`]([^\"'`]*)[\"'`]"], 42 | ], 43 | ``` 44 | #### clsx 45 | > [clsx](https://github.com/lukeed/clsx) 46 | 47 | ```json 48 | "tailwindCSS.experimental.classRegex": [ 49 | ["clsx\\(.*?\\)(?!\\])", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"] 50 | ] 51 | 52 | # Take note of the outer square brackets! 53 | ``` 54 | 55 | ```js 56 | clsx('p-4', 'text-center'); 57 | ``` 58 | 59 | --- 60 | 61 | #### HeadlessUI Transition (React) 62 | > [HeadlessUI React](https://headlessui.com/) 63 | 64 | ```json 65 | "tailwindCSS.experimental.classRegex": [ 66 | "(?:enter|leave)(?:From|To)?=\\s*(?:\"|'|{`)([^(?:\"|'|`})]*)" 67 | ] 68 | ``` 69 | 70 | ```js 71 | 79 | I will fade in and out 80 | 81 | ``` 82 | 83 | --- 84 | 85 | #### classnames 86 | > [classnames](https://github.com/JedWatson/classnames) 87 | 88 | ```json 89 | "tailwindCSS.experimental.classRegex": [ 90 | ["classnames\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"] 91 | ] 92 | 93 | # Take note of the outer square brackets! 94 | ``` 95 | 96 | ```js 97 | classnames('bg-red-500', 'uppercase'); 98 | ``` 99 | 100 | Credits: [bradcl](https://github.com/bradlc) 101 | 102 | --- 103 | 104 | #### Plain Javascript Object 105 | 106 | ```json 107 | "tailwindCSS.experimental.classRegex": [ 108 | ":\\s*?[\"'`]([^\"'`]*).*?," 109 | ] 110 | ``` 111 | 112 | ```js 113 | const styles = { 114 | wrapper: 'flex flex-col', 115 | navItem: 'relative mb-2 md:mb-0', 116 | bullet: 'absolute w-2 h-2 2xl:w-4 2xl:h-4 bg-red rounded-full', 117 | }; 118 | ``` 119 | 120 | Credits: [michaelschufi](https://github.com/michaelschufi) 121 | 122 | --- 123 | 124 | #### Nested object inside a plain javascript object 125 | 126 | ```json 127 | "tailwindCSS.experimental.classRegex": [ 128 | [ 129 | "classNames:\\s*{([\\s\\S]*?)}", 130 | "\\s?[\\w].*:\\s*?[\"'`]([^\"'`]*).*?,?\\s?" 131 | ] 132 | ] 133 | ``` 134 | 135 | ```js 136 | const props = { 137 | classNames: { 138 | container: "w-full h-full" 139 | } 140 | } 141 | ``` 142 | 143 | --- 144 | 145 | #### JavaScript string variable 146 | 147 | ```json 148 | "tailwindCSS.experimental.classRegex": [ 149 | "(?:const|let|var)\\s+[\\w$_][_\\w\\d]*\\s*=\\s*['\\\"](.*?)['\\\"]" 150 | ] 151 | ``` 152 | 153 | ```js 154 | const inputClassNames = "scroll-m-0 border-collapse"; 155 | ``` 156 | 157 | --- 158 | 159 | #### JavaScript string variable with keywords 160 | 161 | ```json 162 | "tailwindCSS.experimental.classRegex": [ 163 | ["(?:\\b(?:const|let|var)\\s+)?[\\w$_]*(?:[Ss]tyles|[Cc]lasses|[Cc]lassnames)[\\w\\d]*\\s*(?:=|\\+=)\\s*['\"]([^'\"]*)['\"]"] 164 | ] 165 | ``` 166 | 167 | ```js 168 | const styles = "bg-red-500 text-white"; 169 | let Classes = "p-4 rounded"; 170 | var classnames = "flex justify-center"; 171 | const buttonStyles = "bg-blue-500 hover:bg-blue-700"; 172 | let formClasses = "space-y-4"; 173 | var inputClassnames = "border-2 border-gray-300"; 174 | styles += 'rounded'; 175 | ``` 176 | 177 | Credits: [mxmalykhin](https://github.com/mxmalykhin) 178 | 179 | --- 180 | 181 | #### TypeScript or JavaScript variables, strings or arrays with keyword 182 | 183 | Captures Tailwind classes based on the following patterns: 184 | 185 | - variables ending with a "Styles" suffix and with or without TS types. 186 | - classes within single quotes, double quotes, or backticks 187 | - classes within strings or arrays 188 | 189 | > Edit Styles keyword to target different variable names/suffixes 190 | ```json 191 | "tailwindCSS.experimental.classRegex": [ 192 | ["Styles\\s*(?::\\s*[^=]+)?\\s*=\\s*([^;]*);", "['\"`]([^'\"`]*)['\"`]"] 193 | ] 194 | ``` 195 | 196 | Examples: 197 | 198 | ```ts 199 | const variableStyles: (string | undefined)[] = [ 200 | className, 201 | showCaret ? 'pr-1' : '', 202 | icon ? 'px-1.5 py-0.5' : 'px-3 py-1', 203 | ]; 204 | ``` 205 | 206 | ```js 207 | const baseStyles = `items-center flex p-5 mx-2 my-1`; 208 | ``` 209 | Credits: [avgvstvs96](https://github.com/avgvstvs96) 210 | 211 | --- 212 | 213 | 214 | #### tailwind-rn 215 | > [tailwind-rn](https://github.com/vadimdemedes/tailwind-rn) 216 | ```json 217 | "tailwindCSS.experimental.classRegex": [ 218 | "tailwind\\('([^)]*)\\')", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)" 219 | ] 220 | ``` 221 | 222 | > Note: 223 | > You might have to add "style" to the `Class Attributes` setting of the Tailwind CSS Extension 224 | > 225 | > Related: https://github.com/vadimdemedes/tailwind-rn/issues/100#issuecomment-1036813662 226 | 227 | ```js 228 | tailwind('pt-12 items-center'); 229 | ``` 230 | 231 | Credits: [tommulkins](https://github.com/tommulkins) 232 | 233 | #### cva 234 | 235 | > [class-variance-authority](https://github.com/joe-bell/cva) 236 | 237 | ```json 238 | "tailwindCSS.experimental.classRegex": [ 239 | ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"] 240 | ] 241 | 242 | # Take note of the outer square brackets! 243 | ``` 244 | 245 | ```js 246 | cva("rounded", { 247 | variants: { 248 | size: { 249 | sm: "p-4", 250 | md: "p-6" 251 | } 252 | } 253 | }) 254 | ``` 255 | 256 | Credits: [Joe Bell](https://github.com/joe-bell) 257 | 258 | #### classList 259 | 260 | ```json 261 | "tailwindCSS.experimental.classRegex": [ 262 | ["classList={{([^;]*)}}", "\\s*?[\"'`]([^\"'`]*).*?:"] 263 | ] 264 | 265 | # Take note of the outer square brackets! 266 | ``` 267 | 268 | 269 | Credits: [carere](https://github.com/carere) 270 | 271 | #### tailwind-join 272 | 273 | > [tailwind-join](https://github.com/satelllte/tailwind-join) 274 | 275 | ```json 276 | "tailwindCSS.experimental.classRegex": [ 277 | ["twJoin\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"] 278 | ] 279 | 280 | # Take note of the outer square brackets! 281 | ``` 282 | Credits: [satelllte](https://github.com/satelllte) 283 | 284 | #### tailwind-merge 285 | > [tailwind-merge] 286 | 287 | ```json 288 | "tailwindCSS.experimental.classRegex": [ 289 | ["(?:twMerge|twJoin)\\(([^;]*)[\\);]", "[`'\"`]([^'\"`;]*)[`'\"`]"] 290 | ] 291 | ``` 292 | 293 | ```js 294 | twMerge('p-8 rounded bg-slate-500', 'pt-10 bg-slate-800') 295 | ``` 296 | Credits: [bradennapier](https://github.com/bradennapier) 297 | 298 | #### tailwind-variants 299 | ```json 300 | "tailwindCSS.experimental.classRegex": [ 301 | ["tv\\(([^)]*)\\)", "{?\\s?[\\w].*:\\s*?[\"'`]([^\"'`]*).*?,?\\s?}?"] 302 | ] 303 | 304 | # Take note of the outer square brackets! 305 | ``` 306 | 307 | ```js 308 | tv({ 309 | base: 'bg-gray-500 grid grid-cols-1 gap-0 tablet:grid-cols-2 mx-auto my-0 p-0 w-full', 310 | variants: { 311 | threeColumn: { 312 | true: 'three-column grid-cols-3 tablet:grid-cols-3 mb-2' 313 | }, 314 | twoColumn: { 315 | true: 'grid-cols-2' 316 | } 317 | } 318 | }) 319 | ``` 320 | 321 | Credits: [magicink](https://github.com/magicink) 322 | 323 | #### HAML 324 | > [HAML] 325 | 326 | ```json 327 | "tailwindCSS.experimental.classRegex": [ 328 | [ "class: ?\"([^\"]*)\"", "([a-zA-Z0-9\\-:]+)" ], 329 | [ "(\\.[\\w\\-.]+)[\\n\\=\\{\\s]", "([\\w\\-]+)" ], 330 | ] 331 | 332 | # Take note of the outer square brackets! 333 | ``` 334 | 335 | ``` haml 336 | %section.text-right.uppercase.font-extralight{class: "leading-[1.1rem]"} lorem 337 | ``` 338 | 339 | Credits: [S1M1S](https://github.com/S1M1S) 340 | 341 | #### JQuery 342 | 343 | ```json 344 | "tailwindCSS.experimental.classRegex": [ 345 | ["(?:add|remove)Class\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"] 346 | ] 347 | 348 | # Take note of the outer square brackets! 349 | ``` 350 | 351 | ```js 352 | $('body').addClass('bg-red-500'); 353 | $('body').removeClass('bg-red-500'); 354 | ``` 355 | 356 | Credits: [alexvipond](https://gitbub.com/alexvipond) 357 | 358 | #### DOM 359 | 360 | ```json 361 | "tailwindCSS.experimental.classRegex": [ 362 | ["classList.(?:add|remove|toggle)\\(([^)]*)\\)", "(?:'|\"|`)([^\"'`]*)(?:'|\"|`)"] 363 | ] 364 | 365 | # Take note of the outer square brackets! 366 | ``` 367 | 368 | ```js 369 | document.body.classList.add('bg-red-500'); 370 | document.body.classList.remove('bg-red-500'); 371 | document.body.classList.toggle('hidden'); 372 | ``` 373 | 374 | Credits: [alexvipond](https://gitbub.com/alexvipond) 375 | 376 | ```json 377 | "tailwindCSS.experimental.classRegex": [ 378 | ["\\s*.className\\s*=\\s*['\\\"](.*?)['\\\"]"] 379 | ] 380 | 381 | # Take note of the outer square brackets! 382 | ``` 383 | 384 | ```js 385 | document.body.className = 'bg-red-500'; 386 | yourCustumEl.className = 'bg-red-500'; 387 | ``` 388 | 389 | Credits: [dennisdotg](https://gitbub.com/dennisdotg) 390 | 391 | #### Comment Tagging 392 | ```json 393 | "tailwindCSS.experimental.classRegex": [ 394 | "@tw\\s\\*\/\\s+[\"'`]([^\"'`]*)" 395 | ] 396 | ``` 397 | 398 | ```js 399 | /** @tw */ "px-5 text-center bg-white py-16 &:not[hidden]" 400 | ``` 401 | 402 | Credits: [james2doyle](https://github.com/james2doyle) 403 | 404 | #### Laravel Blade directives and component attribute functions 405 | 406 | > [Laravel Blade Templates](https://laravel.com/docs/10.x/blade) 407 | 408 | ```json 409 | "tailwindCSS.experimental.classRegex": [ 410 | ["@?class\\(([^)]*)\\)", "['|\"]([^'\"]*)['|\"]"], 411 | "(?:\"|')class(?:\"|')[\\s]*=>[\\s]*(?:\"|')([^\"']*)" 412 | ] 413 | ``` 414 | 415 | ```php 416 | @class(['bg-red-500', 'text-white']) 417 | $attributes->class(['bg-red-500', 'text-white']) 418 | $attributes->merge(['class' => 'bg-red-500 text-white']) 419 | ``` 420 | 421 | Credits: [czernika](https://github.com/czernika) and [Nicholas Davidson](https://github.com/ndavidson7) 422 | 423 | #### Stimulus CSS Classes 424 | > [Stimulus CSS Classes](https://stimulus.hotwired.dev/reference/css-classes) 425 | 426 | ```json 427 | "tailwindCSS.experimental.classRegex": [ 428 | ["data-.*-class=['\"]([^'\"]*)"] 429 | ] 430 | ``` 431 | 432 | ```html 433 |
435 | 436 |
437 | ``` 438 | 439 | #### Tagged Template Literals 440 | 441 | ```json 442 | "tailwindCSS.experimental.classRegex": [ 443 | [ 444 | "(tw`(?:(?:(?:[^`]*\\$\\{[^]*?\\})[^`]*)+|[^`]*`))", 445 | "((?:(?<=`)(?:[^\"'`]*)(?=\\${|`))|(?:(?<=\\})(?:[^\"'`]*)(?=\\${))|(?:(?<=\\})(?:[^\"'`]*)(?=`))|(?:(?<=')(?:[^\"'`]*)(?='))|(?:(?<=\")(?:[^\"'`]*)(?=\"))|(?:(?<=`)(?:[^\"'`]*)(?=`)))" 446 | ], 447 | ] 448 | ``` 449 | 450 | ```js 451 | tw`bg-black ${ok ? 'text-white' : `text-red-500 ${errorClassName}`} ${className}` 452 | ``` 453 | 454 | Credits: [sxxov](https://github.com/sxxov) 455 | 456 | ## EVERYWHERE!!! 457 | For those who are just looking for a quick fix and want to enable tailwind intellisense everywhere. 458 | 459 | ```json 460 | "tailwindCSS.experimental.classRegex": [ 461 | "([a-zA-Z0-9\\-:]+)" 462 | ] 463 | ``` 464 | ```js 465 | pt-1 466 | "pt-1" 467 | const x = "pt-1" 468 | // Will literally trigger everywhere 469 | ``` 470 | > Note: 471 | > The intellisense for tailwind will show up everytime you type a letter, so it might get annoying. 472 | > Only use this if you are 100% sure! 473 | > 474 | > **Create an issue if you are trying to find a regex to match a certain pattern** 475 | 476 | Credits: [Elbasel](https://github.com/Elbasel) 477 | --------------------------------------------------------------------------------