live-code-demo/tailwind.config.cjs

116 lines
3.0 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
colors: {
blue: "#1fb6ff",
purple: "#7e5bef",
pink: "#ff49db",
orange: "#ff7849",
green: "#13ce66",
yellow: "#ffc82c",
"gray-dark": "#273444",
gray: "#8492a6",
"gray-light": "#d3dce6",
transparent: "transparent",
current: "currentColor",
white: "#ffffff",
midnight: "#121063",
metal: "#565584",
tahiti: "#3ab7bf",
silver: "#ecebff",
"bubble-gum": "#ff77e9",
bermuda: "#78dcca",
},
fontFamily: {
sans: ["Graphik", "sans-serif"],
serif: ["Merriweather", "serif"],
},
extend: {
spacing: {
"8xl": "96rem",
"9xl": "128rem",
},
borderRadius: {
"4xl": "2rem",
},
fontFamily: {
display: "Oswald, ui-serif ", // Adds a new `font-display` class
},
colors: {
primary: {
1: "var(--primary-1)",
2: "var(--primary-2)",
3: "var(--primary-3)",
4: "var(--primary-4)",
5: "var(--primary-5)",
6: "var(--primary-6)",
7: "var(--primary-7)",
},
success: {
1: "var(--success-1)",
2: "var(--success-2)",
3: "var(--success-3)",
4: "var(--success-4)",
5: "var(--success-5)",
6: "var(--success-6)",
7: "var(--success-7)",
},
warning: {
1: "var(--warning-1)",
2: "var(--warning-2)",
3: "var(--warning-3)",
4: "var(--warning-4)",
5: "var(--warning-5)",
6: "var(--warning-6)",
7: "var(--warning-7)",
},
danger: {
1: "var(--danger-1)",
2: "var(--danger-2)",
3: "var(--danger-3)",
4: "var(--danger-4)",
5: "var(--danger-5)",
6: "var(--danger-6)",
7: "var(--danger-7)",
},
link: {
1: "var(--link-1)",
2: "var(--link-2)",
3: "var(--link-3)",
4: "var(--link-4)",
5: "var(--link-5)",
6: "var(--link-6)",
7: "var(--link-7)",
},
background: {
1: "var(--color-bg-1)",
2: "var(--color-bg-2)",
3: "var(--color-bg-3)",
4: "var(--color-bg-4)",
5: "var(--color-bg-5)",
white: "var(--color-bg-white)",
},
text: {
1: "var(--color-text-1)",
2: "var(--color-text-2)",
3: "var(--color-text-3)",
4: "var(--color-text-4)",
},
border: {
1: "var(--color-border-1)",
2: "var(--color-border-2)",
3: "var(--color-border-3)",
4: "var(--color-border-4)",
},
fill: {
1: "var(--color-fill-1)",
2: "var(--color-fill-2)",
3: "var(--color-fill-3)",
4: "var(--color-fill-4)",
},
},
},
},
};