api/web/tailwind.config.ts

import type { Config } from "tailwindcss";
import type { PluginAPI } from "tailwindcss/types/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: {
      fontFamily: {
        sans: "clear-sans,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji",
      },
      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
       */

      typography: (theme: PluginAPI["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")],
};