btrc-hub/frontend/tailwind.config.js

/** @type {import('tailwindcss').Config} */
import type { Config } from 'tailwindcss'

import { DARK_COLOUR_SHADE,
	 LIGHT_COLOUR_SHADE,
	 TAG_COLOUR } from './src/consts'

const colours = Object.values (TAG_COLOUR)

export default {
    content: ['./src/**/*.{html,js,ts,jsx,tsx,mdx}'],
    safelist: [...colours.map (c => `text-${ c }-${ LIGHT_COLOUR_SHADE }`),
	       ...colours.map (c => `hover:text-${ c }-${ LIGHT_COLOUR_SHADE - 200 }`),
	       ...colours.map (c => `dark:text-${ c }-${ DARK_COLOUR_SHADE }`),
	       ...colours.map (c => `dark:hover:text-${ c }-${ DARK_COLOUR_SHADE - 200 }`)],
    theme: {
	extend: {
	    animation: {
		'rainbow-scroll': 'rainbow-scroll .25s linear infinite' },
	    colors: {
		red: { 925: '#5f1414',
		       975: '#230505' },
		border: 'hsl(var(--border))',
		input: 'hsl(var(--input))',
		ring: 'hsl(var(--ring))',
		background: 'hsl(var(--background))',
		foreground: 'hsl(var(--foreground))',
		primary: { DEFAULT: 'hsl(var(--primary))',
			   foreground: 'hsl(var(--primary-foreground))' },
		secondary: { DEFAULT: 'hsl(var(--secondary))',
			     foreground: 'hsl(var(--secondary-foreground))' },
		destructive: { DEFAULT: 'hsl(var(--destructive))',
			       foreground: 'hsl(var(--destructive-foreground))' },
		muted: { DEFAULT: 'hsl(var(--muted))',
			 foreground: 'hsl(var(--muted-foreground))' },
		accent: { DEFAULT: 'hsl(var(--accent))',
			  foreground: 'hsl(var(--accent-foreground))' } },
	    keyframes: {
		'rainbow-scroll': {
		    '0%':   { backgroundPosition: '0% 50%' },
		    '100%': { backgroundPosition: '200% 50%' } } } } },
    plugins: [require ('@tailwindcss/typography')] } satisfies Config