api/web/tailwind.config.ts

import type { Config } from 'tailwindcss';
/** @type {import('tailwindcss').Config} */
export default <Partial<Config>>{
  safelist: [
    'DropdownWrapper_blip',
    'unraid_mark_1',
    'unraid_mark_2',
    'unraid_mark_3',
    'unraid_mark_4',
    'unraid_mark_6',
    'unraid_mark_7',
    'unraid_mark_8',
    'unraid_mark_9',
  ],
  theme: {
    extend: {
      colors: {
        inherit: 'inherit',
        transparent: 'transparent',

        black: '#1c1b1b',
        'grey-darkest': '#222',
        'grey-darker': '#606f7b',
        'grey-dark': '#383735',
        'grey-mid': '#999999',
        grey: '#e0e0e0',
        'grey-light': '#dae1e7',
        'grey-lighter': '#f1f5f8',
        'grey-lightest': '#f2f2f2',
        white: '#ffffff',

        'orange-dark': '#f15a2c',
        orange: '#ff8c2f',
        'unraid-red': '#E22828',

        alpha: 'var(--color-alpha)',
        beta: 'var(--color-beta)',
        gamma: 'var(--color-gamma)',
        'gamma-opaque': 'var(--color-gamma-opaque)',
      },
      // Unfortunately due to webGUI CSS setting base HTML font-size to .65% or something we must use pixel values for web components
      fontSize: {
        '10px': '10px',
        '12px': '12px',
        '14px': '14px',
        '16px': '16px',
        '18px': '18px',
        '20px': '20px',
        '24px': '24px',
        '30px': '30px',
      },
      spacing: {
        '-8px': '-8px',
        '2px': '2px',
        '4px': '4px',
        '6px': '6px',
        '8px': '8px',
        '10px': '10px',
        '12px': '12px',
        '14px': '14px',
        '16px': '16px',
        '20px': '20px',
        '24px': '24px',
        '28px': '28px',
        '32px': '32px',
        '36px': '36px',
        '40px': '40px',
        '64px': '64px',
        '80px': '80px',
        '90px': '90px',
        '150px': '150px',
        '160px': '160px',
        '200px': '200px',
        '260px': '260px',
        '300px': '300px',
        '310px': '310px',
        '350px': '350px',
        '448px': '448px',
        '512px': '512px',
        '640px': '640px',
        '800px': '800px',
      },
      minWidth: {
        '86px': '86px',
        '160px': '160px',
        '260px': '260px',
        '300px': '300px',
        '310px': '310px',
        '350px': '350px',
        '800px': '800px',
      },
      maxWidth: {
        '86px': '86px',
        '160px': '160px',
        '260px': '260px',
        '300px': '300px',
        '310px': '310px',
        '350px': '350px',
        '640px': '640px',
        '800px': '800px',
        '1024px': '1024px',
      },
      screens: {
        '2xs': '470px',
        xs: '530px',
        tall: { raw: '(min-height: 700px)' },
      },
      /**
       * @todo modify prose classes to use pixels for webgui…sadge https://tailwindcss.com/docs/typography-plugin#customizing-the-default-theme
       */
      // @ts-ignore
      typography: theme => ({
        DEFAULT: {
          css: {
            color: theme('colors.beta'),
            a: {
              color: theme('colors.orange'),
              textDecoration: 'underline',
              '&:hover': {
                color: theme('colors.orange-dark'),
              },
            },
            '--tw-prose-body': theme('colors.beta'),
            '--tw-prose-headings': theme('colors.beta'),
            '--tw-prose-lead': theme('colors.beta'),
            '--tw-prose-links': theme('colors.orange'),
            '--tw-prose-bold': theme('colors.beta'),
            '--tw-prose-counters': theme('colors.beta'),
            '--tw-prose-bullets': theme('colors.beta'),
            '--tw-prose-hr': theme('colors.beta'),
            '--tw-prose-quotes': theme('colors.beta'),
            '--tw-prose-quote-borders': theme('colors.beta'),
            '--tw-prose-captions': theme('colors.beta'),
            '--tw-prose-code': theme('colors.beta'),
            '--tw-prose-pre-code': theme('colors.beta'),
            '--tw-prose-pre-bg': theme('colors.alpha'),
            '--tw-prose-th-borders': theme('colors.beta'),
            '--tw-prose-td-borders': theme('colors.beta'),
            '--tw-prose-invert-body': theme('colors.alpha'),
            '--tw-prose-invert-headings': theme('colors.alpha'),
            '--tw-prose-invert-lead': theme('colors.alpha'),
            '--tw-prose-invert-links': theme('colors.orange'),
            '--tw-prose-invert-bold': theme('colors.alpha'),
            '--tw-prose-invert-counters': theme('colors.alpha'),
            '--tw-prose-invert-bullets': theme('colors.alpha'),
            '--tw-prose-invert-hr': theme('colors.alpha'),
            '--tw-prose-invert-quotes': theme('colors.alpha'),
            '--tw-prose-invert-quote-borders': theme('colors.alpha'),
            '--tw-prose-invert-captions': theme('colors.alpha'),
            '--tw-prose-invert-code': theme('colors.alpha'),
            '--tw-prose-invert-code-bg': theme('colors.gamma-opaque'),
            '--tw-prose-invert-pre-code': theme('colors.alpha'),
            '--tw-prose-invert-pre-bg': theme('colors.beta'),
            '--tw-prose-invert-th-borders': theme('colors.alpha'),
            '--tw-prose-invert-td-borders': theme('colors.alpha'),
          },
        },
        black: {
          css: {
            '--tw-prose-body': theme('colors.black'),
            '--tw-prose-headings': theme('colors.black'),
            '--tw-prose-lead': theme('colors.black'),
            '--tw-prose-links': theme('colors.black'),
            '--tw-prose-bold': theme('colors.black'),
            '--tw-prose-counters': theme('colors.black'),
            '--tw-prose-bullets': theme('colors.black'),
            '--tw-prose-hr': theme('colors.black'),
            '--tw-prose-quotes': theme('colors.black'),
            '--tw-prose-quote-borders': theme('colors.black'),
            '--tw-prose-captions': theme('colors.black'),
            '--tw-prose-code': theme('colors.black'),
            '--tw-prose-pre-code': theme('colors.black'),
            '--tw-prose-pre-bg': theme('colors.black'),
            '--tw-prose-th-borders': theme('colors.black'),
            '--tw-prose-td-borders': theme('colors.black'),
            '--tw-prose-invert-body': theme('colors.grey-darkest'),
            '--tw-prose-invert-headings': theme('colors.grey-darkest'),
            '--tw-prose-invert-lead': theme('colors.grey-darkest'),
            '--tw-prose-invert-links': theme('colors.grey-darkest'),
            '--tw-prose-invert-bold': theme('colors.grey-darkest'),
            '--tw-prose-invert-counters': theme('colors.grey-darkest'),
            '--tw-prose-invert-bullets': theme('colors.grey-darkest'),
            '--tw-prose-invert-hr': theme('colors.grey-darkest'),
            '--tw-prose-invert-quotes': theme('colors.grey-darkest'),
            '--tw-prose-invert-quote-borders': theme('colors.grey-darkest'),
            '--tw-prose-invert-captions': theme('colors.grey-darkest'),
            '--tw-prose-invert-code': theme('colors.grey-darkest'),
            '--tw-prose-invert-pre-code': theme('colors.grey-darkest'),
            '--tw-prose-invert-pre-bg': 'rgb(0 0 0 / 50%)',
            '--tw-prose-invert-th-borders': theme('colors.grey-darkest'),
            '--tw-prose-invert-td-borders': theme('colors.grey-darkest'),
          },
        },
      }),
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
};