Skip to content

Instantly share code, notes, and snippets.

@stevebauman
Created January 19, 2024 21:52
Show Gist options
  • Save stevebauman/08ebe182c9cb1c589ce9f396052f544b to your computer and use it in GitHub Desktop.
Save stevebauman/08ebe182c9cb1c589ce9f396052f544b to your computer and use it in GitHub Desktop.
All Tailwind Utilities in PHP with their matching regex patterns
<?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']);
<?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