/** * To use these colors in Tailwind, you need to extend your tailwind.config.js file. * * For details see: * https://tailwindcss.com/docs/customizing-colors/#extending-the-default-palette * * To use own names for the colors, change the node names "main-color-*" and "color-*". */ { "theme": { "extend": { "colors": { "main-color-1": "#DD3856", "main-color-2": "#6E8100", "main-color-3": "#00929D", "main-color-4": "#3E72E7", "color-1": { "100": "#F8D3DA", "200": "#F0A8B5", "300": "#E97C90", "400": "#E1516B", "500": "#DD3856", "600": "#AE1E38", "700": "#83162A", "800": "#570F1C", "900": "#2C070E" }, "color-2": { "100": "#F7FFCC", "200": "#F0FF99", "300": "#E8FF66", "400": "#E1FF33", "500": "#D9FF00", "600": "#AECC00", "700": "#6E8100", "800": "#576600", "900": "#2B3300" }, "color-3": { "100": "#CCFBFF", "200": "#99F8FF", "300": "#66F4FF", "400": "#33F1FF", "500": "#00EDFF", "600": "#00BECC", "700": "#00929D", "800": "#005F66", "900": "#002F33" }, "color-4": { "100": "#D2DEF9", "200": "#A4BDF4", "300": "#779CEE", "400": "#3E72E7", "500": "#1C59E3", "600": "#1747B5", "700": "#113688", "800": "#0B245B", "900": "#06122D" } } } } }