This RegEx Will Change How You Design With Tailwind

This RegEx Will Change How You Design With Tailwind

Are you using TailwindCSS in you project?

… of course you are it's all the rage lately, and everyone’s using it.

Need to change all the color based utilities in your app because you need to use semantic color names to implement a new color theme, fix dark mode, or change colors for any other reason?

… of course you do! Changes to the user interface, theme and graphics come up all the time.

Have you now realized your styles are dispersed and scattered across all the markup within your project?

… of course you have, and you’ve probably also realized your components aren’t organized as well as you would like.

Well I have a simple regular expression to aid you in swapping out all your old color utilities with new color utilities:

(ext|decoration|bg|from|via|to|border|divide|outline|ring|ring-offset|shadow|accent|caret|fill|stroke){1}-(inherit|current|transparent|black|white|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|blueGray|coolGray|trueGray|warmGray|lightBlue){1}(-[0-9]{2,3})?

No warranty is provided or inferred. Use at your own peril. Void where prohibited by law. May cause nausea, confusion, or panic. If you experience any of these symptoms, please discontinue use of the regular expression.

The regex above should match against all of the default atomic color utilties that TailwindCSS provides and can be modified to more specifically match your use case. You may want to narrow down the list of color names or utility names to catch a specific subset of utilizations. Custom color names could be added to the list. You might also expand the regex to target specific variant modifiers.

For example, the regular expression below will match instances where at least one of the listed variant modifiers is used; narrows the set of utility names, and matches against a list of custom colors:

\b((dark|hover|active|focus|focus-visible):)+(text|bg|placeholder|ring|border|divide){1}-(platinum|gold|silver|bronze){1}(-[0-9]{2,3})?

List of variant modifiers provided by TailwindCSS

first-letter|first-line|marker|selection|file|placeholder|backdrop|before|after|first|last|only|odd|even|first-of-type|last-of-type|only-of-type|visited|target|open|default|checked|indeterminate|placeholder-shown|autofill|required|valid|invalid|in-range|out-of-range|read-only|empty|focus-within|hover|focus|focus-visible|active|enabled|disabled|group|peer|ltr|rtl|motion-safe|motion-reduce|dark|print|sm|md|lg|xl|2xl|portrait|landscape

List of default colors

inherit|current|transparent|black|white|slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|blueGray|coolGray|trueGray|warmGray|lightBlue

List of utility prefixes

text|decoration|bg|from|via|to|border|divide|outline|ring|ring-offset|shadow|accent|caret|fill|stroke

Photo by Darwin Vegher on Unsplash