/** * 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": "#CC0945", "main-color-2": "#9F5300", "main-color-3": "#00808B", "main-color-4": "#0079D7", "color-1": { "100": "#FDCEDD", "200": "#FB9DBA", "300": "#F96C98", "400": "#F63C75", "500": "#F40B53", "600": "#CC0945", "700": "#930632", "800": "#620421", "900": "#310211" }, "color-2": { "100": "#FFE7CC", "200": "#FFCE99", "300": "#FFB666", "400": "#FF9D33", "500": "#FF8500", "600": "#CC6A00", "700": "#9F5300", "800": "#663500", "900": "#331B00" }, "color-3": { "100": "#CCFBFF", "200": "#99F7FF", "300": "#66F3FF", "400": "#33EFFF", "500": "#00EBFF", "600": "#00BCCC", "700": "#00808B", "800": "#005E66", "900": "#002F33" }, "color-4": { "100": "#CCE9FF", "200": "#99D2FF", "300": "#66BCFF", "400": "#33A6FF", "500": "#0090FF", "600": "#0079D7", "700": "#005699", "800": "#003966", "900": "#001D33" } } } } }