triggerdotdev--trigger.dev/apps/webapp/tailwind.config.js

/** @type {import('tailwindcss').Config} */
const colors = require("tailwindcss/colors");

const slate = {
  ...colors.slate,
  450: "#7E8FA6",
  500: "#6B7C95",
  550: "#586981",
  600: "#45566D",
  650: "#3C4B62",
  750: "#293649",
  850: "#1A2434",
  900: "#131B2B",
};

/** Trigger.dev custom palette */
const midnight = {
  ...colors.slate,
  450: colors.slate[850],
  500: colors.slate[650],
  550: colors.slate[700],
  600: colors.slate[750],
  650: colors.slate[800],
  750: colors.slate[850],
  800: colors.slate[900],
  850: "#0E1521",
  900: "#0B1018",
};

/** Text colors */
const bright = colors.slate[200];
const dimmed = colors.slate[400];

/** Shadcn colors */
const background = midnight[900];
const foreground = "hsl(213 31% 91%)";
const muted = "hsl(223 47% 11%)";
const mutedForeground = "hsl(215.4 16.3% 56.9%)";
const popover = slate[850];
const popoverForeground = colors.slate[800];
const card = "hsl(0 0% 100%)";
const cardForeground = "hsl(222.2 47.4% 11.2%)";
const border = slate[850];
const input = slate[850];
const primary = colors.indigo[600];
const primaryForeground = colors.indigo[500];
const secondary = "hsl(222.2 47.4% 11.2%)";
const secondaryForeground = slate[850];
const tertiary = "hsl(217 37% 7% / 0)";
const tertiaryForeground = slate[850];
const accent = slate[750];
const accentForeground = "hsl(210 40% 98%)";
const destructive = "hsl(0 63% 31%)";
const destructiveForeground = "hsl(210 40% 98%)";
const ring = colors.indigo[600];
const radius = "0.5rem";
const darkBackground = midnight[900];
const divide = slate[850];

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{ts,jsx,tsx}",
    // include packages if not transpiling
    "../../packages/**/*.{ts,tsx}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      fontFamily: {
        sans: ["Inter", "sans-serif"],
        mono: ["Roboto Mono", "monospace"],
        title: ["Poppins", "sans-serif"],
      },
      fontSize: {
        xxs: [
          "0.65rem",
          {
            lineHeight: "0.75rem",
            letterSpacing: "-0.01em",
            fontWeight: "500",
          },
        ],
        "2sm": [
          "0.8125rem",
          {
            lineHeight: "0.875rem",
            letterSpacing: "-0.01em",
            fontWeight: "500",
          },
        ],
      },
      colors: {
        midnight,
        darkBackground,
        divide,
        bright,
        dimmed,
        background,
        border,
        input,
        ring,
        foreground,
        primary: {
          DEFAULT: primary,
          foreground: primaryForeground,
        },
        secondary: {
          DEFAULT: secondary,
          foreground: secondaryForeground,
        },
        tertiary: {
          DEFAULT: tertiary,
          foreground: tertiaryForeground,
        },
        destructive: {
          DEFAULT: destructive,
          foreground: destructiveForeground,
        },
        muted: {
          DEFAULT: muted,
          foreground: mutedForeground,
        },
        accent: {
          DEFAULT: accent,
          foreground: accentForeground,
        },
        popover: {
          DEFAULT: popover,
          foreground: popoverForeground,
        },
        card: {
          DEFAULT: card,
          foreground: cardForeground,
        },
        slate,
        acid: {
          400: "#F1FF98",
          500: "#E7FF52",
          600: "#FFF067",
        },
        toxic: {
          400: "#8EFF9A",
          500: "#41FF54",
          600: "#00FFA3",
        },
        devEnv: colors.pink,
        liveEnv: colors.green,
        "ui-border": slate[800],
        "ui-border-dimmed": slate[900],
      },
      borderRadius: {
        lg: radius,
        md: `calc(${radius} - 2px)`,
        sm: `calc(${radius} - 4px)`,
      },
      boxShadow: {
        "glow-primary": "0 0 10px 5px rgba(218, 244, 55, 0.2)",
        "glow-secondary": "0 0 10px 5px rgba(79, 70, 229, 0.2)",
        "glow-pink": "0 0 10px 5px rgba(236, 72, 153, 0.2)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        float: {
          "0%": { transform: "translatey(0px)" },
          "50%": { transform: "translatey(7px)" },
          "100%": { transform: "translatey(0px)" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
      backgroundImage: {
        "gradient-radial": "radial-gradient(closest-side, var(--tw-gradient-stops))",
        "gradient-primary": `linear-gradient(90deg, acid-500 0%, toxic-500 100%)`,
        "gradient-primary-hover": `linear-gradient(80deg, acid-600 0%, toxic-600 100%)`,
        "gradient-secondary": `linear-gradient(90deg, hsl(271 91 65) 0%, hsl(221 83 53) 100%)`,
        "gradient-radial-secondary": `radial-gradient(hsl(271 91 65), hsl(221 83 53))`,
      },
      gridTemplateColumns: {
        carousel: "repeat(6, 200px)",
      },
      screens: {
        'lg-height': {'raw': '(max-height: 750px)'},
        'md-height': {'raw': '(max-height: 600px)'},
      }
    },
  },
  plugins: [
    require("@tailwindcss/container-queries"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    require("tailwindcss-animate"),
    require("tailwind-scrollbar"),
    require("tailwind-scrollbar-hide"),
  ],
};