websites/tailwind.config.ts

652 lines
18 KiB
TypeScript
Raw Permalink Normal View History

2024-03-07 11:27:32 +01:00
import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
2024-05-06 22:35:25 +02:00
// theme: {
// extend: {
// backgroundImage: {
// "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
// "gradient-conic":
// "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
// },
// gridTemplateRows: {
// // Simple 8 row grid
// "8": "repeat(8, minmax(0, 1fr))",
// "11": "repeat(11, minmax(0, 1fr))",
// },
// },
// },
// plugins: [require("@tailwindcss/typography"), require("daisyui")],
// daisyui: {
// themes: [
// "winter",
// {
// cupcake: {
// ...require("daisyui/src/theming/themes")["cupcake"],
// "--rounded-btn": "0.5rem",
// },
// },
// ],
// },
// theme: {
// extend: [],
// },
presets: [
{
theme: {
screens: {
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1140px",
},
colors: {
current: "currentColor",
transparent: "transparent",
black: "#000",
white: "#fff",
gray: {
50: "#f9fafb",
100: "#f3f4f6",
200: "#e5e7eb",
300: "#d1d5db",
400: "#9ca3af",
500: "#6b7280",
600: "#4b5563",
700: "#374151",
800: "#1f2937",
900: "#111827",
},
red: {
50: "#fef2f2",
100: "#fee2e2",
200: "#fecaca",
300: "#fca5a5",
400: "#f87171",
500: "#ef4444",
600: "#dc2626",
700: "#b91c1c",
800: "#991b1b",
900: "#7f1d1d",
},
yellow: {
50: "#fffbeb",
100: "#fef3c7",
200: "#fde68a",
300: "#fcd34d",
400: "#fbbf24",
500: "#f59e0b",
600: "#d97706",
700: "#b45309",
800: "#92400e",
900: "#78350f",
},
green: {
50: "#ecfdf5",
100: "#d1fae5",
200: "#a7f3d0",
300: "#6ee7b7",
400: "#34d399",
500: "#10b981",
600: "#059669",
700: "#047857",
800: "#065f46",
900: "#064e3b",
},
blue: {
50: "#eff6ff",
100: "#dbeafe",
200: "#bfdbfe",
300: "#93c5fd",
400: "#60a5fa",
500: "#3b82f6",
600: "#2563eb",
700: "#1d4ed8",
800: "#1e40af",
900: "#1e3a8a",
},
indigo: {
50: "#eef2ff",
100: "#e0e7ff",
200: "#c3dafe",
300: "#a5b4fc",
400: "#818cf8",
500: "#6366f1",
600: "#4f46e5",
700: "#4338ca",
800: "#3730a3",
900: "#312e81",
},
purple: {
50: "#f5f3ff",
100: "#ede9fe",
200: "#ddd6fe",
300: "#c4b5fd",
400: "#a78bfa",
500: "#8b5cf6",
600: "#7c3aed",
700: "#6d28d9",
800: "#5b21b6",
900: "#4c1d95",
},
pink: {
50: "#fdf2f8",
100: "#fce7f3",
200: "#fbcfe8",
300: "#f9a8d4",
400: "#f472b6",
500: "#ec4899",
600: "#db2777",
700: "#be185d",
800: "#9d174d",
900: "#831843",
},
},
spacing: {
px: "1px",
"0": "0px",
"0.5": "0.125rem",
"1": "0.25rem",
"1.5": "0.375rem",
"2": "0.5rem",
"2.5": "0.625rem",
"3": "0.75rem",
"3.5": "0.875rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"7": "1.75rem",
"8": "2rem",
"9": "2.25rem",
"10": "2.5rem",
"11": "2.75rem",
"12": "3rem",
"14": "3.5rem",
"16": "4rem",
"20": "5rem",
"24": "6rem",
"32": "8rem",
"36": "9rem",
"40": "10rem",
"44": "11rem",
"48": "12rem",
"52": "13rem",
"56": "14rem",
"60": "15rem",
"64": "16rem",
"72": "18rem",
"80": "20rem",
"96": "24rem",
"128": "32rem",
"160": "40rem",
"192": "48rem",
},
backgroundColor: ({theme}) => ({
...theme("colors"),
body: "#fff",
}),
backgroundPosition: {
bottom: "bottom",
center: "center",
left: "left",
"left-bottom": "left bottom",
"left-top": "left top",
right: "right",
"right-bottom": "right bottom",
"right-top": "right top",
top: "top",
},
backgroundSize: {
auto: "auto",
cover: "cover",
contain: "contain",
},
borderColor: ({theme}) => ({
...theme("colors"),
DEFAULT: "#e5e7eb",
}),
borderRadius: {
none: "0",
sm: "0.125rem",
DEFAULT: "6px",
lg: "0.5rem",
xl: "0.75rem",
"2xl": "1rem",
"3xl": "1.5rem",
"4xl": "2rem",
"6xl": "3rem",
"12xl": "6rem",
full: "9999px",
},
borderWidth: {
DEFAULT: "1px",
"0": "0",
"2": "2px",
"4": "4px",
"8": "8px",
},
boxShadow: {
sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
DEFAULT:
"0px 1px 2px rgba(148, 163, 184, 0.35), 0px 6px 6px rgba(203, 213, 225, 0.15)",
md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
none: "none",
},
container: {},
cursor: {
auto: "auto",
DEFAULT: "default",
pointer: "pointer",
wait: "wait",
text: "text",
move: "move",
"not-allowed": "not-allowed",
},
fill: {
current: "currentColor",
},
flex: {
"1": "1 1 0%",
auto: "1 1 auto",
initial: "0 1 auto",
none: "none",
},
flexGrow: {
"0": "0",
DEFAULT: "1",
},
flexShrink: {
"0": "0",
DEFAULT: "1",
},
fontFamily: {
body: '"DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
heading:
'"DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
sans: '"DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
serif: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
},
fontSize: {
xs: "0.75rem",
sm: "0.875rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "3.75rem",
"7xl": "4.5rem",
"8xl": "6rem",
"9xl": "8rem",
},
fontWeight: {
hairline: "100",
thin: "200",
light: "300",
normal: "400",
medium: "500",
semibold: "600",
bold: "700",
extrabold: "800",
black: "900",
},
height: ({theme}) => ({
auto: "auto",
...theme("spacing"),
full: "100%",
screen: "100vh",
}),
inset: {
"0": "0",
auto: "auto",
"1/2": "50%",
},
letterSpacing: {
tighter: "-0.05em",
tight: "-0.025em",
normal: "0",
wide: "0.025em",
wider: "0.05em",
widest: "0.1em",
},
lineHeight: {
none: "1",
tight: "1.25",
snug: "1.375",
normal: "1.5",
relaxed: "1.625",
loose: "2",
},
listStyleType: {
none: "none",
disc: "disc",
decimal: "decimal",
},
margin: ({theme}) => ({
auto: "auto",
...theme("spacing"),
// ...negative(theme("spacing")),
"for-radius": "5.4rem",
}),
maxHeight: {
full: "100%",
screen: "100vh",
},
maxWidth: {
none: "none",
xs: "20rem",
sm: "24rem",
md: "28rem",
lg: "32rem",
xl: "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
"7xl": "80rem",
full: "100%",
min: "min-content",
max: "max-content",
prose: "65ch",
},
minHeight: {
"0": "0",
full: "100%",
screen: "100vh",
},
minWidth: {
"0": "0",
full: "100%",
},
objectPosition: {
bottom: "bottom",
center: "center",
left: "left",
"left-bottom": "left bottom",
"left-top": "left top",
right: "right",
"right-bottom": "right bottom",
"right-top": "right top",
top: "top",
},
opacity: {
"0": "0",
"5": "0.05",
"10": "0.1",
"20": "0.2",
"25": "0.25",
"30": "0.3",
"40": "0.4",
"50": "0.5",
"60": "0.6",
"70": "0.7",
"75": "0.75",
"80": "0.8",
"90": "0.9",
"95": "0.95",
"100": "1",
},
order: {
first: "-9999",
last: "9999",
none: "0",
"1": "1",
"2": "2",
"3": "3",
"4": "4",
"5": "5",
"6": "6",
"7": "7",
"8": "8",
"9": "9",
"10": "10",
"11": "11",
"12": "12",
},
padding: ({theme}) => theme("spacing"),
placeholderColor: ({theme}) => theme("colors"),
stroke: {
current: "currentColor",
},
textColor: ({theme}) => ({
...theme("colors"),
body: "#111827",
}),
width: ({theme}) => ({
auto: "auto",
...theme("spacing"),
"1/2": "50%",
"1/3": "33.333333%",
"2/3": "66.666667%",
"1/4": "25%",
"2/4": "50%",
"3/4": "75%",
"1/5": "20%",
"2/5": "40%",
"3/5": "60%",
"4/5": "80%",
"1/6": "16.666667%",
"2/6": "33.333333%",
"3/6": "50%",
"4/6": "66.666667%",
"5/6": "83.333333%",
"1/12": "8.333333%",
"2/12": "16.666667%",
"3/12": "25%",
"4/12": "33.333333%",
"5/12": "41.666667%",
"6/12": "50%",
"7/12": "58.333333%",
"8/12": "66.666667%",
"9/12": "75%",
"10/12": "83.333333%",
"11/12": "91.666667%",
full: "100%",
screen: "100vw",
}),
zIndex: {
auto: "auto",
"0": "0",
"10": "10",
"20": "20",
"30": "30",
"40": "40",
"50": "50",
},
2024-03-07 11:27:32 +01:00
},
2024-05-06 22:35:25 +02:00
variants: {
accessibility: ["responsive", "focus-within", "focus"],
alignContent: ["responsive"],
alignItems: ["responsive"],
alignSelf: ["responsive"],
animation: ["responsive"],
appearance: ["responsive"],
backgroundAttachment: ["responsive"],
backgroundClip: ["responsive"],
backgroundColor: [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus",
],
backgroundImage: ["responsive"],
backgroundOpacity: [
"responsive",
"group-hover",
"focus-within",
"hover",
"focus",
],
backgroundPosition: ["responsive"],
backgroundRepeat: ["responsive"],
backgroundSize: ["responsive"],
borderCollapse: ["responsive"],
borderColor: [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus",
],
borderOpacity: [
"responsive",
"group-hover",
"focus-within",
"hover",
"focus",
],
borderRadius: ["responsive"],
borderStyle: ["responsive"],
borderWidth: ["responsive"],
boxShadow: [
"responsive",
"group-hover",
"focus-within",
"hover",
"focus",
],
boxSizing: ["responsive"],
clear: ["responsive"],
container: ["responsive"],
cursor: ["responsive"],
display: ["responsive"],
divideColor: ["responsive", "dark"],
divideOpacity: ["responsive"],
divideStyle: ["responsive"],
divideWidth: ["responsive"],
fill: ["responsive"],
flex: ["responsive"],
flexDirection: ["responsive"],
flexGrow: ["responsive"],
flexShrink: ["responsive"],
flexWrap: ["responsive"],
float: ["responsive"],
fontFamily: ["responsive"],
fontSize: ["responsive"],
fontSmoothing: ["responsive"],
fontStyle: ["responsive"],
fontVariantNumeric: ["responsive"],
fontWeight: ["responsive"],
gap: ["responsive"],
gradientColorStops: ["responsive", "dark", "hover", "focus"],
gridAutoColumns: ["responsive"],
gridAutoFlow: ["responsive"],
gridAutoRows: ["responsive"],
gridColumn: ["responsive"],
gridColumnEnd: ["responsive"],
gridColumnStart: ["responsive"],
gridRow: ["responsive"],
gridRowEnd: ["responsive"],
gridRowStart: ["responsive"],
gridTemplateColumns: ["responsive"],
gridTemplateRows: ["responsive"],
height: ["responsive"],
inset: ["responsive"],
justifyContent: ["responsive"],
justifyItems: ["responsive"],
justifySelf: ["responsive"],
letterSpacing: ["responsive"],
lineHeight: ["responsive"],
listStylePosition: ["responsive"],
listStyleType: ["responsive"],
margin: ["responsive"],
maxHeight: ["responsive"],
maxWidth: ["responsive"],
minHeight: ["responsive"],
minWidth: ["responsive"],
objectFit: ["responsive"],
objectPosition: ["responsive"],
opacity: [
"responsive",
"group-hover",
"focus-within",
"hover",
"focus",
],
order: ["responsive"],
outline: ["responsive", "focus-within", "focus"],
overflow: ["responsive"],
overscrollBehavior: ["responsive"],
padding: ["responsive"],
placeContent: ["responsive"],
placeItems: ["responsive"],
placeSelf: ["responsive"],
placeholderColor: ["responsive", "dark", "focus"],
placeholderOpacity: ["responsive", "focus"],
pointerEvents: ["responsive"],
position: ["responsive"],
resize: ["responsive"],
ringColor: ["responsive", "dark", "focus-within", "focus"],
ringOffsetColor: ["responsive", "dark", "focus-within", "focus"],
ringOffsetWidth: ["responsive", "focus-within", "focus"],
ringOpacity: ["responsive", "focus-within", "focus"],
ringWidth: ["responsive", "focus-within", "focus"],
rotate: ["responsive", "hover", "focus"],
scale: ["responsive", "hover", "focus"],
skew: ["responsive", "hover", "focus"],
space: ["responsive"],
stroke: ["responsive"],
strokeWidth: ["responsive"],
tableLayout: ["responsive"],
textAlign: ["responsive"],
textColor: [
"responsive",
"dark",
"group-hover",
"focus-within",
"hover",
"focus",
],
textDecoration: [
"responsive",
"group-hover",
"focus-within",
"hover",
"focus",
],
textOpacity: [
"responsive",
"group-hover",
"focus-within",
"hover",
"focus",
],
textOverflow: ["responsive"],
textTransform: ["responsive"],
transform: ["responsive"],
transformOrigin: ["responsive"],
transitionDelay: ["responsive"],
transitionDuration: ["responsive"],
transitionProperty: ["responsive"],
transitionTimingFunction: ["responsive"],
translate: ["responsive", "hover", "focus"],
userSelect: ["responsive"],
verticalAlign: ["responsive"],
visibility: ["responsive"],
whitespace: ["responsive"],
width: ["responsive"],
wordBreak: ["responsive"],
zIndex: ["responsive", "focus-within", "focus"],
},
corePlugins: {},
plugins: [require("@tailwindcss/typography")],
2024-03-07 11:27:32 +01:00
},
2024-05-06 22:35:25 +02:00
],
2024-03-07 11:27:32 +01:00
};
export default config;