tailwind.config.js

// NOTE: We do not actually use Tailwind but having this file allows
// Tailwind-supporting IDEs to autocomplete classnames, most of which we follow by convention

// NOTE: Currently this has to be manually synced wit ./frontend/styles/vars.scss
module.exports = {
    content: ['./frontend/**/*.{js,jsx,ts,tsx}'],
    theme: {
        colors: {
            'primary-highlight': 'rgba(#1d4aff, 0.1)',
            'primary-light': '#345cff',
            primary: '#1d4aff',
            'primary-dark': '#1330a6',
            'danger-highlight': 'rgba(#db3707, 0.1)',
            'danger-lighter': '#ffa599',
            'danger-light': '#df4b20',
            danger: '#db3707',
            'danger-dark': '#992705',
            'warning-highlight': 'rgba(#f7a501, 0.1)',
            'warning-light': '#f8b633',
            warning: '#f7a501',
            'warning-dark': '#a06b01',
            'success-highlight': 'rgba(#388600, 0.1)',
            'success-light': '#5f9d32',
            success: '#388600',
            'success-dark': '#245700',
            'primary-alt-highlight': 'rgba(#35416b, 0.1)',
            'primary-alt': '#35416b',
            'primary-alt-dark': '#222a46',
            default: '#2d2d2d',
            'default-dark': '#050505',
            muted: '#5f5f5f',
            'muted-dark': '#403939',
            'muted-alt': '#747ea1',
            'muted-alt-dark': '#515871',
            mark: 'hsl(42deg 93% 86% / 80%)',
            white: '#fff',
            'bg-light': '#fff',
            side: '#fafaf9',
            mid: '#f2f2f2',
            border: 'rgba(0, 0, 0, 0.15)',
            'border-light': 'rgba(0, 0, 0, 0.08)',
            'border-bold': 'rgba(0, 0, 0, 0.24)',
            'border-active': 'rgba(0, 0, 0, 0.36)',
            transparent: 'transparent',

            'brand-blue': '#1d4aff',
            'brand-red': '#f54e00',
            'brand-yellow': '#f9bd2b',
            'brand-key': '#000',
        },
        extend: {
            screens: {
                sm: '576px',
                md: '768px',
                lg: '992px',
                xl: '1200px',
                xxl: '1600px',
            },
        },
    },
    plugins: [],
    // Comment in plugins that we have managed to replicate in our utilities.scss
    corePlugins: [
        // 'accentColor', // The accent-color utilities like accent-green-700
        // 'accessibility', // The sr-only and not-sr-only utilities
        'alignContent', // The align-content utilities like content-end
        'alignItems', // The align-items utilities like items-center
        // 'alignSelf', // The align-self utilities like self-end
        // 'animation', // The animation utilities like animate-ping
        // 'appearance', // The appearance utilities like appearance-none
        'aspectRatio', // The aspect-ratio utilities like aspect-square
        // 'backdropBlur', // The backdrop-blur utilities like backdrop-blur-md
        // 'backdropBrightness', // The backdrop-brightness utilities like backdrop-brightness-100
        // 'backdropContrast', // The backdrop-contrast utilities like backdrop-contrast-100
        // 'backdropFilter', // The backdrop-filter utilities like backdrop-filter
        // 'backdropGrayscale', // The backdrop-grayscale utilities like backdrop-grayscale-0
        // 'backdropHueRotate', // The backdrop-hue-rotate utilities like backdrop-hue-rotate-30
        // 'backdropInvert', // The backdrop-invert utilities like backdrop-invert-0
        // 'backdropOpacity', // The backdrop-opacity utilities like backdrop-opacity-50
        // 'backdropSaturate', // The backdrop-saturate utilities like backdrop-saturate-100
        // 'backdropSepia', // The backdrop-sepia utilities like backdrop-sepia-0
        // 'backgroundAttachment', // The background-attachment utilities like bg-local
        // 'backgroundBlendMode', // The background-blend-mode utilities like bg-blend-color-burn
        // 'backgroundClip', // The background-clip utilities like bg-clip-padding
        'backgroundColor', // The background-color utilities like bg-green-700
        // 'backgroundImage', // The background-image utilities like bg-gradient-to-br
        // 'backgroundOpacity', // The background-color opacity utilities like bg-opacity-25
        // 'backgroundOrigin', // The background-origin utilities like bg-origin-padding
        // 'backgroundPosition', // The background-position utilities like bg-left-top
        // 'backgroundRepeat', // The background-repeat utilities like bg-repeat-x
        // 'backgroundSize', // The background-size utilities like bg-cover
        // 'blur', // The blur utilities like blur-md
        // 'borderCollapse', // The border-collapse utilities like border-collapse
        'borderColor', // The border-color utilities like border-t-green-700
        // 'borderOpacity', // The border-color opacity utilities like border-opacity-25
        'borderRadius', // The border-radius utilities like rounded-l-lg
        // 'borderSpacing', // The border-spacing utilities like border-spacing-x-28
        'borderStyle', // The border-style utilities like border-dotted
        'borderWidth', // The border-width utilities like border-t-4
        // 'boxDecorationBreak', // The box-decoration-break utilities like decoration-clone
        // 'boxShadow', // The box-shadow utilities like shadow-lg
        // 'boxShadowColor', // The box-shadow-color utilities like shadow-green-700
        // 'boxSizing', // The box-sizing utilities like box-border
        // 'breakAfter', // The break-after utilities like break-after-avoid-page
        // 'breakBefore', // The break-before utilities like break-before-avoid-page
        // 'breakInside', // The break-inside utilities like break-inside-avoid
        // 'brightness', // The brightness utilities like brightness-100
        // 'caretColor', // The caret-color utilities like caret-green-700
        // 'clear', // The clear utilities like clear-right
        // 'columns', // The columns utilities like columns-auto
        // 'container', // The container component
        // 'content', // The content utilities like content-none
        // 'contrast', // The contrast utilities like contrast-100
        'cursor', // The cursor utilities like cursor-grab
        // 'display', // The display utilities like table-column-group
        // 'divideColor', // The between elements border-color utilities like divide-slate-500
        // 'divideOpacity', // The divide-opacity utilities like divide-opacity-50
        // 'divideStyle', // The divide-style utilities like divide-dotted
        // 'divideWidth', // The between elements border-width utilities like divide-x-2
        // 'dropShadow', // The drop-shadow utilities like drop-shadow-lg
        // 'fill', // The fill utilities like fill-green-700
        // 'filter', // The filter utilities like filter
        'flex', // The flex utilities like flex-auto
        // 'flexBasis', // The flex-basis utilities like basis-px
        'flexDirection', // The flex-direction utilities like flex-row-reverse
        'flexGrow', // The flex-grow utilities like flex-grow
        'flexShrink', // The flex-shrink utilities like flex-shrink
        'flexWrap', // The flex-wrap utilities like flex-wrap-reverse
        'float', // The float utilities like float-left
        'fontFamily', // The font-family utilities like font-serif
        'fontSize', // The font-size utilities like text-3xl
        // 'fontSmoothing', // The font-smoothing utilities like antialiased
        'fontStyle', // The font-style utilities like italic
        // 'fontVariantNumeric', // The font-variant-numeric utilities like oldstyle-nums
        'fontWeight', // The font-weight utilities like font-medium
        'gap', // The gap utilities like gap-x-28
        // 'gradientColorStops', // The gradient-color-stops utilities like via-green-700
        // 'grayscale', // The grayscale utilities like grayscale-0
        // 'gridAutoColumns', // The grid-auto-columns utilities like auto-cols-min
        // 'gridAutoFlow', // The grid-auto-flow utilities like grid-flow-dense
        // 'gridAutoRows', // The grid-auto-rows utilities like auto-rows-min
        'gridColumn', // The grid-column utilities like col-span-6
        'gridColumnEnd', // The grid-column-end utilities like col-end-7
        'gridColumnStart', // The grid-column-start utilities like col-start-7
        'gridRow', // The grid-row utilities like row-span-3
        'gridRowEnd', // The grid-row-end utilities like row-end-4
        'gridRowStart', // The grid-row-start utilities like row-start-4
        'gridTemplateColumns', // The grid-template-columns utilities like grid-cols-7
        // 'gridTemplateRows', // The grid-template-rows utilities like grid-rows-4
        'height', // The height utilities like h-72
        // 'hueRotate', // The hue-rotate utilities like hue-rotate-30
        // 'inset', // The inset utilities like top-44
        // 'invert', // The invert utilities like invert-0
        // 'isolation', // The isolation utilities like isolate
        'justifyContent', // The justify-content utilities like justify-center
        // 'justifyItems', // The justify-items utilities like justify-items-end
        // 'justifySelf', // The justify-self utilities like justify-self-end
        'letterSpacing', // The letter-spacing utilities like tracking-normal
        'lineHeight', // The line-height utilities like leading-9
        // 'listStylePosition', // The list-style-position utilities like list-inside
        'listStyleType', // The list-style-type utilities like list-disc
        'margin', // The margin utilities like mt-28
        'maxHeight', // The max-height utilities like max-h-36
        'maxWidth', // The max-width utilities like max-w-6xl
        'minHeight', // The min-height utilities like min-h-screen
        'minWidth', // The min-width utilities like min-w-min
        // 'mixBlendMode', // The mix-blend-mode utilities like mix-blend-hard-light
        'objectFit', // The object-fit utilities like object-fill
        // 'objectPosition', // The object-position utilities like object-left-top
        'opacity', // The opacity utilities like opacity-50
        // 'order', // The order utilities like order-8
        // 'outlineColor', // The outline-color utilities like outline-green-700
        // 'outlineOffset', // The outline-offset utilities like outline-offset-2
        // 'outlineStyle', // The outline-style utilities like outline-dashed
        // 'outlineWidth', // The outline-width utilities like outline-2
        'overflow', // The overflow utilities like overflow-x-hidden
        // 'overscrollBehavior', // The overscroll-behavior utilities like overscroll-y-contain
        'padding', // The padding utilities like pt-28
        // 'placeContent', // The place-content utilities like place-content-between
        // 'placeItems', // The place-items utilities like place-items-end
        // 'placeSelf', // The place-self utilities like place-self-end
        // 'placeholderColor', // The placeholder color utilities like placeholder-red-600
        // 'placeholderOpacity', // The placeholder color opacity utilities like placeholder-opacity-25
        'pointerEvents', // The pointer-events utilities like pointer-events-none
        'position', // The position utilities like absolute
        // 'preflight', // Tailwind's base/reset styles
        // 'resize', // The resize utilities like resize-y
        // 'ringColor', // The ring-color utilities like ring-green-700
        // 'ringOffsetColor', // The ring-offset-color utilities like ring-offset-green-700
        // 'ringOffsetWidth', // The ring-offset-width utilities like ring-offset-2
        // 'ringOpacity', // The ring-opacity utilities like ring-opacity-50
        // 'ringWidth', // The ring-width utilities like ring-4
        'rotate', // The rotate utilities like rotate-6
        // 'saturate', // The saturate utilities like saturate-100
        // 'scale', // The scale utilities like scale-x-95
        // 'scrollBehavior', // The scroll-behavior utilities like scroll-auto
        // 'scrollMargin', // The scroll-margin utilities like scroll-mt-28
        // 'scrollPadding', // The scroll-padding utilities like scroll-pt-28
        // 'scrollSnapAlign', // The scroll-snap-align utilities like snap-end
        // 'scrollSnapStop', // The scroll-snap-stop utilities like snap-normal
        // 'scrollSnapType', // The scroll-snap-type utilities like snap-y
        // 'sepia', // The sepia utilities like sepia-0
        // 'skew', // The skew utilities like skew-x-12
        // 'space', // The "space-between" utilities like space-x-4
        // 'stroke', // The stroke utilities like stroke-green-700
        // 'strokeWidth', // The stroke-width utilities like stroke-1
        // 'tableLayout', // The table-layout utilities like table-auto
        'textAlign', // The text-align utilities like text-right
        'textColor', // The text-color utilities like text-green-700
        'textDecoration', // The text-decoration utilities like overline
        'textDecorationColor', // The text-decoration-color utilities like decoration-green-700
        // 'textDecorationStyle', // The text-decoration-style utilities like decoration-dotted
        // 'textDecorationThickness', // The text-decoration-thickness utilities like decoration-4
        // 'textIndent', // The text-indent utilities like indent-28
        // 'textOpacity', // The text-opacity utilities like text-opacity-50
        'textOverflow', // The text-overflow utilities like overflow-ellipsis
        // 'textTransform', // The text-transform utilities like lowercase
        // 'textUnderlineOffset', // The text-underline-offset utilities like underline-offset-2
        // 'touchAction', // The touch-action utilities like touch-pan-right
        // 'transform', // The transform utility (for enabling transform features)
        // 'transformOrigin', // The transform-origin utilities like origin-bottom-right
        // 'transitionDelay', // The transition-delay utilities like delay-200
        // 'transitionDuration', // The transition-duration utilities like duration-200
        // 'transitionProperty', // The transition-property utilities like transition-colors
        // 'transitionTimingFunction', // The transition-timing-function utilities like ease-in
        // 'translate', // The translate utilities like translate-x-full
        'userSelect', // The user-select utilities like select-text
        // 'verticalAlign', // The vertical-align utilities like align-bottom
        // 'visibility', // The visibility utilities like visible
        'whitespace', // The whitespace utilities like whitespace-pre
        'width', // The width utilities like w-1.5
        // 'willChange', // The will-change utilities like will-change-scroll
        // 'wordBreak', // The word-break utilities like break-words
        'zIndex', // The z-index utilities like z-30
    ],
}