clustvirt/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["**/*.templ", "**/*.go"],
  safelist: [
    {
      pattern: /list-image-(accepted|informational|never|possible)/,
    },
    {
      pattern: /[a-z]+-ui(blue|cyan|green|grey|orange|pink|purple|red|yellow)-[0-9]+/
    },
  ],
  theme: {
    extend: {
      listStyleImage: {
        never: 'url("/static/icons/list-never.svg")',
        accepted: 'url("/static/icons/list-accepted.svg")',
        possible: 'url("/static/icons/list-possible.svg")',
        informational: 'url("/static/icons/list-informational.svg")',
      },
      content: {
        link: 'url("/static/icons/link.svg")',
      },
      colors: {
        'uiblue': {
          50: '#eef3fb',
          100: '#dde7f8',
          200: '#bbcff1',
          300: '#99b6e9',
          400: '#779ee2',
          500: '#5586db',
          600: '#446baf',
          700: '#335083',
          800: '#223658',
          900: '#111b2c',
        },
        'uicyan': {
          50: '#f2fefd',
          100: '#e5fdfc',
          200: '#cbfaf9',
          300: '#b2f8f5',
          400: '#98f5f2',
          500: '#7ef3ef',
          600: '#65c2bf',
          700: '#4c928f',
          800: '#326160',
          900: '#193130',
        },
        'uigreen': {
          50: '#f5f9f5',
          100: '#ebf2ec',
          200: '#d8e5d8',
          300: '#c4d9c5',
          400: '#b1ccb1',
          500: '#9dbf9e',
          600: '#7e997e',
          700: '#5e735f',
          800: '#3f4c3f',
          900: '#1f2620',
        },
        'uigrey': {
          50: '#f5f5f5',
          100: '#eaeaea',
          200: '#d6d6d6',
          300: '#c1c1c1',
          400: '#adadad',
          500: '#989898',
          600: '#7a7a7a',
          700: '#5b5b5b',
          800: '#3d3d3d',
          900: '#1e1e1e',
        },
        'uiorange': {
          50: '#f9f3ef',
          100: '#f2e8df',
          200: '#e5d0bf',
          300: '#d8b9a0',
          400: '#cba180',
          500: '#be8a60',
          600: '#986e4d',
          700: '#72533a',
          800: '#4c3726',
          900: '#261c13',
        },
        'uipink': {
          50: '#faf0f9',
          100: '#f5e1f3',
          200: '#ebc3e7',
          300: '#e0a5d8',
          400: '#d687cf',
          500: '#cc69c3',
          600: '#a3549c',
          700: '#7a3f75',
          800: '#522a4e',
          900: '#291527',
        },
        'uipurple': {
          50: '#fceefc',
          100: '#f8dcf8',
          200: '#f1b9f2',
          300: '#ea97eb',
          400: '#e374e5',
          500: '#dc51de',
          600: '#b041b2',
          700: '#843185',
          800: '#582059',
          900: '#2c102c',
        },
        'uired': {
          50: '#fbe9ef',
          100: '#f7d2de',
          200: '#efa5bd',
          300: '#e8789d',
          400: '#e04b7c',
          500: '#d81e5b',
          600: '#ad1849',
          700: '#821237',
          800: '#560c24',
          900: '#2b0612',
        },
        'uiyellow': {
          50: '#fffff5',
          100: '#ffffea',
          200: '#fffed6',
          300: '#fffec1',
          400: '#fffdad',
          500: '#fffd98',
          600: '#ccca7a',
          700: '#99985b',
          800: '#66653d',
          900: '#33331e',
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}