/** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx,mdx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", // Or if using `src` directory: "./src/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { backgroundPrimary: { 100: "#FFFBE6", }, primary: { 100: "#c3dff1", 200: "#a5cfea", 300: "#87bfe3", 400: "#69afdc", 500: "#5aa7d8", 600: "#4b9fd5", 700: "#3c97d1", 800: "#1e87ca", 900: "#0077c3", }, secondary: { 100: "#808080", 200: "#908879", 300: "#a09071", 400: "#b0986a", 500: "#c0a063", 600: "#cfa85b", 700: "#dfb054", 800: "#efb84c", 900: "#ffc045", }, textMain: { 100: "#444444", }, mainDisable: { 100: "#888888", }, info: { 100: "#2B91EF", 200: "#0061bd", }, danger: { 100: "#FF2C2C", }, body: { 100: "#EEEEEE", }, }, }, screens: { xs: "290px", sm: "640px", // => @media (min-width: 640px) { ... } md: "768px", // => @media (min-width: 768px) { ... } lg: "1024px", // => @media (min-width: 1024px) { ... } xl: "1440px", // => @media (min-width: 1280px) { ... } "2xl": "1536px", // => @media (min-width: 1536px) { ... } }, animation: { "infinite-scroll": "infinite-scroll 200s linear infinite", }, keyframes: { "infinite-scroll": { from: { transform: "translateX(0)" }, to: { transform: "translateX(-100%)" }, }, }, }, plugins: [], corePlugins: { backdropOpacity: false, backgroundOpacity: false, borderOpacity: false, divideOpacity: false, ringOpacity: false, textOpacity: false, }, };