web/tailwind.config.js

97 lines
2.0 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
"./plugins/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
backgroundPrimary: {
100: "#FFFBE6",
},
primary: {
100: "#2189a818",
200: "#2189a8ce",
300: "#2ab0daa6",
400: "#279fc4",
500: "#2189A8",
600: "#1C7A96",
700: "#166B84",
800: "#105C72",
900: "#0A4D60",
},
secondary: {
100: "#FDE9D9",
200: "#FCCFB2",
300: "#FABF8B",
400: "#F8AE64",
500: "#F79D3E",
600: "#F68C17",
700: "#E27600",
800: "#B95B00",
900: "#8C4000",
},
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,
},
};