tailwind.config.js

const colors = {
  navy: {
    50: '#f3f8f9',
    100: '#d9f0fa',
    200: '#aee1f5',
    300: '#7ac2e5',
    400: '#449fd0',
    500: '#327ebc',
    600: '#2b64a4',
    700: '#244b82',
    800: '#1a335d',
    900: '#101f3d',
  },
  blue: {
    50: '#f6f9fb',
    100: '#e3f0fd',
    200: '#c5d9fa',
    300: '#9cb6f3',
    400: '#788eea',
    500: '#6169e3',
    600: '#504dd5',
    700: '#3d3ab6',
    800: '#2b2788',
    900: '#181956',
  },
  indigo: {
    50: '#f8fafb',
    100: '#eceffc',
    200: '#d8d5f9',
    300: '#b8afef',
    400: '#a085e4',
    500: '#8861db',
    600: '#7045ca',
    700: '#5534a8',
    800: '#3a2479',
    900: '#211749',
  },
  pink: {
    50: '#fcfcfb',
    100: '#faeff3',
    200: '#f6cce7',
    300: '#eb9fcd',
    400: '#e970ae',
    500: '#dd4c94',
    600: '#c73274',
    700: '#a02655',
    800: '#741b37',
    900: '#47111d',
  },
  cocoa: {
    50: '#fcfbf8',
    100: '#faf0d9',
    200: '#f5d6b1',
    300: '#e7ad7e',
    400: '#da8050',
    500: '#c55d30',
    600: '#a9431f',
    700: '#823219',
    800: '#5b2313',
    900: '#39150c',
  },
  gold: {
    50: '#fbfaf4',
    100: '#f9f0bd',
    200: '#f1dd81',
    300: '#dcb84f',
    400: '#be8e2b',
    500: '#9f6e15',
    600: '#81550d',
    700: '#63400c',
    800: '#432b0b',
    900: '#2d1b08',
  },
  green: {
    50: '#f3f6f2',
    100: '#e1f0e4',
    200: '#b9e6c1',
    300: '#7fcb8f',
    400: '#39aa5d',
    500: '#288f38',
    600: '#227927',
    700: '#1e5c21',
    800: '#163f1b',
    900: '#102715',
  },
  submarine: {
    50: '#eff6f5',
    100: '#d0f0f4',
    200: '#9ae6e5',
    300: '#60ccc6',
    400: '#26ad9f',
    500: '#1b9179',
    600: '#187a5f',
    700: '#175e4b',
    800: '#114038',
    900: '#0c2729',
  },
}

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  safelist: [{ pattern: /border-(\w+)-500/ }],
  theme: {
    extend: {
      colors: {
        ...colors,
        // primary: 'rgb(var(--color-primary) / <alpha-value>)',
        // secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
        // accent: 'rgb(var(--color-accent) / <alpha-value>)',
        // highlight: 'rgb(var(--color-highlight) / <alpha-value>)',
        background: 'black',
        // foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
        primary: colors.blue[50],
        secondary: colors.navy[200],
        foreground: colors.navy[900],
      },
      // borderWidth: {
      //   1: '1px',
      // },
    },
  },
  plugins: [],
}