A handy SASS mixin allowing using one-off color classes and @apply from Tailwind CSS the familiar way without needing to add them in the global config.

tw-color-classes.scss

@tailwind base;

@mixin tw-base-layer-wrap {
  @layer base {
    @content;
  }

  @content;
}

@mixin tw-color-classes($cname, $color) {
  @include tw-base-layer-wrap {
    .text-#{$cname} {
      color: #{$color};
    }

    .bg-#{$cname} {
      background-color: #{$color};
    }

    .border-#{$cname} {
      border-color: #{$color};
    }
  }
}

// @use '../assets/css/utils' as utils;

// @include utils.tw-color-classes('investment-ideas-light', #f1e9d8);
// @include utils.tw-color-classes('investment-ideas-dark', #31434a);