/** * 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": "#99D6FF", "main-color-2": "#F8BEE1", "main-color-3": "#F1C79E", "main-color-4": "#9FDCBC", "color-1": { "100": "#CCEBFF", "200": "#99D6FF", "300": "#66C2FF", "400": "#33ADFF", "500": "#0099FF", "600": "#007ACC", "700": "#005C99", "800": "#003D66", "900": "#001F33" }, "color-2": { "100": "#F8BEE1", "200": "#F5A3D4", "300": "#F075BF", "400": "#EB47AA", "500": "#E61995", "600": "#B81477", "700": "#8A0F59", "800": "#5C0A3B", "900": "#2E051E" }, "color-3": { "100": "#F9E5D2", "200": "#F1C79E", "300": "#ECB279", "400": "#E5984D", "500": "#DF7E20", "600": "#B2651A", "700": "#864C13", "800": "#59330D", "900": "#2D1906" }, "color-4": { "100": "#DAF1E5", "200": "#B4E4CB", "300": "#9FDCBC", "400": "#6AC897", "500": "#44BB7D", "600": "#379564", "700": "#29704B", "800": "#1B4B32", "900": "#0E2519" } } } } }