Created
January 19, 2024 21:52
-
-
Save stevebauman/08ebe182c9cb1c589ce9f396052f544b to your computer and use it in GitHub Desktop.
All Tailwind Utilities in PHP with their matching regex patterns
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
$color = function (string $utility): array { | |
return [ | |
"^$utility-%s(-(100|200|300|400|500|600|700|800|900|950))$", | |
["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"] | |
]; | |
}; | |
// Layout | |
Utility::register('aspect-ratio', '^aspect-'); | |
Utility::register('container', '^container$'); | |
Utility::register('columns', '^columns-'); | |
Utility::register('break-after', '^break-after-'); | |
Utility::register('break-before', '^break-before-'); | |
Utility::register('break-inside', '^break-inside-'); | |
Utility::register('box-decoration-break', '^box-decoration-'); | |
Utility::register('box-sizing', '^(%s)$', ['box-border', 'box-content']); | |
Utility::register('display', '^(%s)$', ['block', 'inline-block', 'inline', 'flex', 'inline-flex', 'table', 'inline-table', 'table', 'table-caption', 'table-cell', 'table-column', 'table-column-group', 'table-footer-group', 'table-header-group', 'table-row-group', 'table-row', 'flow-root', 'grid', 'inline-grid', 'contents', 'list-item', 'hidden']); | |
Utility::register('floats', '^float-'); | |
Utility::register('clear', '^clear-'); | |
Utility::register('isolation', '^(%s)', ['isolate', 'isolation-auto']); | |
Utility::register('object-fit', '^object-(%s)$', ['contain', 'cover', 'fill', 'none', 'scale-down']); | |
Utility::register('object-position', '^object-(%s)$', ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top']); | |
Utility::register('overflow', '^overflow-'); | |
Utility::register('overscroll-behavior', '^overscroll-'); | |
Utility::register('position', '^(%s)$', ['static', 'fixed', 'absolute', 'relative', 'sticky']); | |
Utility::register('top', '^top-'); | |
Utility::register('right', '^right-'); | |
Utility::register('bottom', '^bottom-'); | |
Utility::register('left', '^left-'); | |
Utility::register('visibility', '^(%s)$', ['visible', 'invisible', 'collapse']); | |
Utility::register('z-index', '^z-'); | |
// Flexbox & Grid | |
Utility::register('flex-basis', '^basis-'); | |
Utility::register('flex-direction', '^(%s)', ['flex-row', 'flex-col']); | |
Utility::register('flex-wrap', '^(%s)', ['flex-wrap', 'flex-nowrap']); | |
Utility::register('flex', '^flex-(%s)&', ['1', 'auto', 'initial', 'none']); | |
Utility::register('flex-grow', '^grow'); | |
Utility::register('flex-shrink', '^shrink'); | |
Utility::register('order', '^order-'); | |
Utility::register('grid-template-columns', '^grid-cols-'); | |
Utility::register('grid-column-start-end', '^col-'); | |
Utility::register('grid-template-rows', '^grid-rows-'); | |
Utility::register('grid-row-start-end', '^row-'); | |
Utility::register('grid-auto-flow', '^grid-flow-'); | |
Utility::register('grid-auto-columns', '^auto-cols-'); | |
Utility::register('grid-auto-rows', '^auto-rows-'); | |
Utility::register('gap', '^gap-'); | |
Utility::register('justify-content', '^justify-'); | |
Utility::register('justify-items', '^justify-items-'); | |
Utility::register('justify-self', '^justify-self-'); | |
Utility::register('align-content', '^content-'); | |
Utility::register('align-items', '^items-'); | |
Utility::register('align-self', '^self-'); | |
Utility::register('place-content', '^place-content-'); | |
Utility::register('place-items', '^place-items-'); | |
Utility::register('place-self', '^place-self-'); | |
// Spacing | |
Utility::register('padding', '^(%s)-', ['p', 'px', 'py', 'ps', 'pe', 'pt', 'pr', 'pl', 'py', 'pb']); | |
Utility::register('margin', '^(%s)-', ['m', 'mx', 'my', 'ms', 'me', 'mt', 'mr', 'ml', 'my', 'mb']); | |
Utility::register('space-between', '^space-'); | |
// Sizing | |
Utility::register('width', '^w-'); | |
Utility::register('min-width', '^min-w-'); | |
Utility::register('max-width', '^max-w-'); | |
Utility::register('height', '^h-'); | |
Utility::register('min-height', '^min-h-'); | |
Utility::register('max-height', '^max-h-'); | |
Utility::register('size', '^size-'); | |
// Typography | |
Utility::register('font-family', '^font-(%s)$', ['sans', 'serif', 'mono']); | |
Utility::register('font-size', '^text-'); | |
Utility::register('font-smoothing', '^(%s)$', ['antialiased', 'subpixel-antialiased']); | |
Utility::register('font-style', '^(%s)$', ['italic', 'not-italic']); | |
Utility::register('font-weight', '^font-'); | |
Utility::register('font-variant-numeric', '^%s$', ['normal-nums', 'ordinal', 'slashed-zero', 'lining-nums', 'oldstyle-nums', 'proportional-nums', 'tabular-nums', 'diagonal-fractions', 'stacked-fractions']); | |
Utility::register('letter-spacing', '^tracking-'); | |
Utility::register('line-clamp', '^line-clamp-'); | |
Utility::register('line-height', '^leading-'); | |
Utility::register('list-style-image', '^list-image-none$'); | |
Utility::register('list-style-position', '^list-(%s)', ['inside', 'outside']); | |
Utility::register('list-style-type', '^list-(%s)', ['none', 'disc', 'decimal']); | |
Utility::register('text-align', '^text-(%s)', ['left', 'center', 'right', 'justify', 'start', 'end']); | |
Utility::register('text-color', ...$color('text')); | |
Utility::register('text-decoration', '^%s', ['underline', 'overline', 'line-through', 'no-underline']); | |
Utility::register('text-decoration-color', ...$color('decoration')); | |
Utility::register('text-decoration-style', '^decoration-(%s)$', ['solid', 'double', 'dotted', 'dashed', 'wavy']); | |
Utility::register('text-decoration-thickness', '^decoration-(%s)$', ['auto', 'from-font', '0', '1', '2', '4', '8']); | |
Utility::register('text-underline-offset', '^underline-offset-'); | |
Utility::register('text-transform', '^(%s)$', ['uppercase', 'lowercase', 'capitalize', 'normal-case']); | |
Utility::register('text-overflow', '^(%s)$', ['truncate', 'text-ellipsis', 'text-clip']); | |
Utility::register('text-wrap', '^text-(%s)$', ['wrap', 'nowrap', 'balance', 'pretty']); | |
Utility::register('text-indent', '^indent-'); | |
Utility::register('vertical-align', '^align-'); | |
Utility::register('whitespace', '^whitespace-'); | |
Utility::register('word-break', '^break-(%s)$', ['normal', 'words', 'all']); | |
Utility::register('hyphens', '^hyphens-'); | |
Utility::register('content', '^content-'); | |
// Backgrounds | |
Utility::register('backgrounds', '^bg-'); | |
Utility::register('background-attachment', '^bg-'); | |
Utility::register('background-clip', '^bg-'); | |
Utility::register('background-color', ...$color('bg', ['red'])); | |
Utility::register('background-origin', '^bg-origin-(%s)$', ['border', 'padding', 'content']); | |
Utility::register('background-position', '^bg-(%s)', ['bottom', 'center', 'left', 'left-bottom', 'left-top', 'right', 'right-bottom', 'right-top', 'top']); | |
Utility::register('background-repeat', '^bg-(%s)$', ['repeat', 'no-repeat', 'repeat-x', 'repeat-y', 'repeat-round', 'repeat-space']); | |
Utility::register('background-size', '^bg-(%s)$', ['auto', 'cover', 'contain']); | |
Utility::register('background-image', '^bg-(%s)$', ['none', 'gradient-to-t', 'gradient-to-tr', 'gradient-to-r', 'gradient-to-br', 'gradient-to-b', 'gradient-to-bl', 'gradient-to-l', 'gradient-to-tl']); | |
Utility::register('gradient-color-stops', '^(%s)-', ['from', 'via', 'to']); | |
// Borders | |
Utility::register('border-radius', '^rounded-'); | |
Utility::register('border-width', '^border-'); | |
Utility::register('border-color', ...$color('border')); | |
Utility::register('border-style', '^border-(%s)$', ['solid', 'dashed', 'dotted', 'double', 'none']); | |
Utility::register('divide-width', '^divide-(%s)', ['x', 'y']); | |
Utility::register('divide-color', ...$color('divide')); | |
Utility::register('divide-style', '^divide-(%s)$', ['solid', 'dashed', 'dotted', 'double', 'none']); | |
Utility::register('outline-width', '^outline-'); | |
Utility::register('outline-color', ...$color('outline')); | |
Utility::register('outline-style', '^outline(?:-(%s))?$', ['solid', 'dashed', 'dotted', 'double', 'none']); | |
Utility::register('outline-offset', '^outline-offset-'); | |
Utility::register('ring-width', '^ring(?:-(%s))?$', ['0', '1', '2', '4', '8']); | |
Utility::register('ring-color', ...$color('ring')); | |
Utility::register('ring-offset-width', '^ring-offset-(%s)$', ['0', '1', '2', '4', '8']); | |
Utility::register('ring-offset-color', ...$color('ring-offset')); | |
// Effects | |
Utility::register('box-shadow', '^shadow(?:-(%s))?$', ['sm', 'md', 'lg', 'xl', '2xl', 'inner', 'none']); | |
Utility::register('box-shadow-color', ...$color('shadow')); | |
Utility::register('opacity', '^opacity-'); | |
Utility::register('mix-blend-mode', '^mix-blend-'); | |
Utility::register('background-blend-mode', '^bg-blend-'); | |
// Filters | |
Utility::register('blur', '^blur-'); | |
Utility::register('brightness', '^brightness-'); | |
Utility::register('contrast', '^contrast-'); | |
Utility::register('drop-shadow', '^drop-shadow-'); | |
Utility::register('grayscale', '^grayscale-'); | |
Utility::register('hue-rotate', '^hue-rotate-'); | |
Utility::register('invert', '^invert-'); | |
Utility::register('saturate', '^saturate-'); | |
Utility::register('sepia', '^sepia-'); | |
Utility::register('backdrop-blur', '^backdrop-blur-'); | |
Utility::register('backdrop-brightness', '^backdrop-brightness-'); | |
Utility::register('backdrop-contrast', '^backdrop-contrast-'); | |
Utility::register('backdrop-grayscale', '^backdrop-grayscale-'); | |
Utility::register('backdrop-hue-rotate', '^backdrop-hue-rotate-'); | |
Utility::register('backdrop-invert', '^backdrop-invert-'); | |
Utility::register('backdrop-opacity', '^backdrop-opacity-'); | |
Utility::register('backdrop-saturate', '^backdrop-saturate-'); | |
Utility::register('backdrop-sepia', '^backdrop-sepia-'); | |
// Tables | |
Utility::register('border-collapse', '^border-(%s)$', ['collapse', 'separate']); | |
Utility::register('border-spacing', '^border-spacing-'); | |
Utility::register('table-layout', '^table-(%s)$', ['auto', 'fixed']); | |
Utility::register('caption-side', '^caption-(%s)$', ['top', 'bottom']); | |
// Transitions & Animation | |
Utility::register('transition-property', '^transition(?:-(%s))?$', ['none', 'all', 'colors', 'opacity', 'shadow', 'transform']); | |
Utility::register('transition-duration', '^duration-'); | |
Utility::register('transition-timing-function', '^ease-(%s)$', ['linear', 'in', 'out', 'in-out']); | |
Utility::register('transition-delay', '^delay-'); | |
Utility::register('animation', '^animate-'); | |
// Transforms | |
Utility::register('scale', '^scale-'); | |
Utility::register('rotate', '^rotate-'); | |
Utility::register('translate', '^translate-'); | |
Utility::register('skew', '^skew-'); | |
Utility::register('transform-origin', '^origin-'); | |
// Interactivity | |
Utility::register('accent-color', ...$color('accent')); | |
Utility::register('appearance', '^appearance-(%s)$', ['none', 'auto']); | |
Utility::register('cursor', '^cursor-'); | |
Utility::register('caret-color', ...$color('caret')); | |
Utility::register('pointer-events', '^pointer-events-(%s)$', ['none', 'auto']); | |
Utility::register('resize', '^resize(?:-(%s))?$', ['none', 'y', 'x']); | |
Utility::register('scroll-behavior', '^scroll-(%s)$', ['auto', 'smooth']); | |
Utility::register('scroll-margin', '^scroll-m'); | |
Utility::register('scroll-padding', '^scroll-p'); | |
Utility::register('scroll-snap-align', '^snap-(%s)$', ['start', 'end', 'center', 'align-none']); | |
Utility::register('scroll-snap-stop', '^snap-(%s)$', ['normal', 'always']); | |
Utility::register('scroll-snap-type', '^snap-(%s)$', ['none', 'x', 'y', 'both', 'mandatory', 'proximity']); | |
Utility::register('touch-action', '^touch-(%s)$', ['auto', 'none', 'pan-x', 'pan-y', 'pan-left', 'pan-right', 'pan-up', 'pan-down', 'manipulation']); | |
Utility::register('user-select', '^select-(%s)$', ['none', 'text', 'all', 'auto']); | |
Utility::register('will-change', '^will-change-(%s)$', ['auto', 'scroll', 'contents', 'transform']); | |
// SVG | |
Utility::register('fill', ...$color('fill')); | |
Utility::register('stroke', ...$color('stroke')); | |
Utility::register('stroke-width', '^stroke-(%s)$', ['0', '1', '2']); | |
// Accessibility | |
Utility::register('screen-readers', 'sr-only, not-sr-only'); | |
Utility::register('forced-color-adjust', 'forced-color-adjust-(%s)', ['auto', 'none']); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
namespace App; | |
class Utility | |
{ | |
/** | |
* The registered utilities. | |
*/ | |
protected static array $utilities = []; | |
/** | |
* Constructor. | |
*/ | |
public function __construct( | |
public readonly string $name, | |
public readonly string $pattern, | |
public readonly array $options = [], | |
) { | |
} | |
/** | |
* Register a new utility. | |
*/ | |
public static function register(string $name, string $pattern, array $options = []): self | |
{ | |
return static::$utilities[$name] = new static($name, $pattern, $options); | |
} | |
/** | |
* Get all registered utilities. | |
*/ | |
public static function all(): array | |
{ | |
return static::$utilities; | |
} | |
/** | |
* Get a registered utility. | |
*/ | |
public static function get(string $name): ?self | |
{ | |
return static::$utilities[$name] ?? null; | |
} | |
/** | |
* Render the utility pattern. | |
*/ | |
public function render(array $overrides = null): string | |
{ | |
return sprintf($this->pattern, implode('|', $overrides ?? $this->options)); | |
} | |
/** | |
* Render the utility pattern. | |
*/ | |
public function __toString(): string | |
{ | |
return $this->render(); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment