stevedya

    // Aria expanded attribute variant for styling when aria-expanded:className or aria-not-expanded:className
    plugin(({ addVariant, e }) => {
      addVariant('aria-hidden', ({ modifySelectors, separator }) => {
        modifySelectors(
          ({ className }) =>
            `.${e(`aria-hidden${separator}${className}`)}[aria-hidden='true']`,
        );
      });
      addVariant('aria-not-hidden', ({ modifySelectors, separator }) => {
        modifySelectors(

stevedya

@use "sass:map";

$color-dark: #1d1d1d;
$color-primary-medium: #f65050;
$color-purple: #4e47c9;
$color-white: #fff;

$colors: (
    'primary-medium': ('bg': $color-primary-medium, 'text': $color-dark),
    'purple': ('bg': $color-purple, 'text': $color-white),

stevedya

/**
 * Responsive Spacing Plugin
 *
 * This plugin generates responsive spacing utility classes for Tailwind CSS based on spacing tokens in the config.
 * It creates utility classes for padding, margin, and gap with values that adjust based on screen sizes.
 *
 * How it works:
 * - Accepts spacing tokens, which can be a single value or an object representing values for different breakpoints (e.g., 'sm', 'md', 'lg').
 * - Generates utility classes for different directions (e.g., padding-left, margin-top) that adapt to the screen size using Tailwind's responsive breakpoints.
 *