_Before.tsx

import React, { ReactNode, ElementType } from 'react'
import cx from 'classnames'
import getTag from '../../helpers/getTag'
import getClass from '../../helpers/getClass'
import { Omit, HTMLProps } from '../../helpers/omitType'

export const colors = [
  'constants-white',
  'constants-black',
  'text-0',
  'text-20',
  'text-50',
  'text-80',
  'text-100',
  'structure-0',
  'structure-1',
  'structure-2',
  'structure-3',
  'structure-4',
  'structure-5',
  'structure-6',
  'structure-7',
  'structure-8',
  'structure-9',
  'structure-10',
  'structure-20',
  'structure-30',
  'structure-40',
  'structure-50',
  'structure-60',
  'structure-70',
  'structure-80',
  'structure-90',
  'structure-100',
  'primary-20',
  'primary-50',
  'primary-80',
  'primary-100',
  'secondary-20',
  'secondary-50',
  'secondary-80',
  'secondary-100',
  'success-20',
  'success-50',
  'success-80',
  'success-100',
  'warning-20',
  'warning-50',
  'warning-80',
  'warning-100',
  'destructive-20',
  'destructive-50',
  'destructive-80',
  'destructive-100',
  'component-20',
  'component-50',
  'component-80',
  'component-100',
  'folder-20',
  'folder-50',
  'folder-80',
  'folder-100',
  'brand-pink',
  'brand-purple',
  'brand-blue',
  'brand-light-blue',
  'brand-turquoise',
  'brand-green',
  'brand-yellow',
] as const
export type Colors = typeof colors[number]

export interface ColorProps extends Omit<HTMLProps<HTMLElement>, 'color'> {
  color: Colors
  children: ReactNode
  as: ElementType
}

const colorClasses = [
  'hds-bg-constants-white',
  'hds-bg-constants-black',
  'hds-bg-text-0',
  'hds-bg-text-20',
  'hds-bg-text-50',
  'hds-bg-text-80',
  'hds-bg-text-100',
  'hds-bg-structure-0',
  'hds-bg-structure-1',
  'hds-bg-structure-2',
  'hds-bg-structure-3',
  'hds-bg-structure-4',
  'hds-bg-structure-5',
  'hds-bg-structure-6',
  'hds-bg-structure-7',
  'hds-bg-structure-8',
  'hds-bg-structure-9',
  'hds-bg-structure-10',
  'hds-bg-structure-20',
  'hds-bg-structure-30',
  'hds-bg-structure-40',
  'hds-bg-structure-50',
  'hds-bg-structure-60',
  'hds-bg-structure-70',
  'hds-bg-structure-80',
  'hds-bg-structure-90',
  'hds-bg-structure-100',
  'hds-bg-primary-20',
  'hds-bg-primary-50',
  'hds-bg-primary-80',
  'hds-bg-primary-100',
  'hds-bg-secondary-20',
  'hds-bg-secondary-50',
  'hds-bg-secondary-80',
  'hds-bg-secondary-100',
  'hds-bg-success-20',
  'hds-bg-success-50',
  'hds-bg-success-80',
  'hds-bg-success-100',
  'hds-bg-warning-20',
  'hds-bg-warning-50',
  'hds-bg-warning-80',
  'hds-bg-warning-100',
  'hds-bg-destructive-20',
  'hds-bg-destructive-50',
  'hds-bg-destructive-80',
  'hds-bg-destructive-100',
  'hds-bg-component-20',
  'hds-bg-component-50',
  'hds-bg-component-80',
  'hds-bg-component-100',
  'hds-bg-folder-20',
  'hds-bg-folder-50',
  'hds-bg-folder-80',
  'hds-bg-folder-100',
  'hds-bg-brand-pink',
  'hds-bg-brand-purple',
  'hds-bg-brand-blue',
  'hds-bg-brand-light-blue',
  'hds-bg-brand-turquoise',
  'hds-bg-brand-green',
  'hds-bg-brand-yellow',
]

function Color(props: ColorProps) {
  const { color, children, className, as, ...rest } = props
  const Tag = getTag(as)

  return (
    <Tag {...rest} className={cx(className, getClass(color, colorClasses))}>
      {children}
    </Tag>
  )
}

export default Color

After.tsx

import React, { ReactNode, ElementType } from 'react'
import cx from 'classnames'
import getTag from '../../helpers/getTag'
import { Omit, HTMLProps } from '../../helpers/omitType'

export const colors = [
  'constants-white',
  'constants-black',
  'text-0',
  'text-20',
  'text-50',
  'text-80',
  'text-100',
  'structure-0',
  'structure-1',
  'structure-2',
  'structure-3',
  'structure-4',
  'structure-5',
  'structure-6',
  'structure-7',
  'structure-8',
  'structure-9',
  'structure-10',
  'structure-20',
  'structure-30',
  'structure-40',
  'structure-50',
  'structure-60',
  'structure-70',
  'structure-80',
  'structure-90',
  'structure-100',
  'primary-20',
  'primary-50',
  'primary-80',
  'primary-100',
  'secondary-20',
  'secondary-50',
  'secondary-80',
  'secondary-100',
  'success-20',
  'success-50',
  'success-80',
  'success-100',
  'warning-20',
  'warning-50',
  'warning-80',
  'warning-100',
  'destructive-20',
  'destructive-50',
  'destructive-80',
  'destructive-100',
  'component-20',
  'component-50',
  'component-80',
  'component-100',
  'folder-20',
  'folder-50',
  'folder-80',
  'folder-100',
  'brand-pink',
  'brand-purple',
  'brand-blue',
  'brand-light-blue',
  'brand-turquoise',
  'brand-green',
  'brand-yellow',
] as const
export type Colors = typeof colors[number]

export interface ColorProps extends Omit<HTMLProps<HTMLElement>, 'color'> {
  color: Colors
  children: ReactNode
  as: ElementType
}

function Color(props: ColorProps) {
  const { color, children, className, as, ...rest } = props
  const Tag = getTag(as)

  return (
    <Tag {...rest} className={cx(className, {
       [`hds-bg-${color}`]: color
      })}>
      {children}
    </Tag>
  )
}

export default Color

tailwind.config.js

module.exports = {
  prefix: 'hds-',
  purge: {
    enabled: true,
    content: [
      './src/**/*.tsx',
    ],
    options: {
      whitelistPatterns: [/^hds-(bg|ANY|OTHER|TAILWIND|GROUP)/],
    },
  },
}