46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
darkMode: "selector",
|
|
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
|
theme: {
|
|
extend: {
|
|
fontSize: {
|
|
// Mobile sizes
|
|
"h1-mobile": ["2rem", { lineHeight: "1.2" }], // 32px
|
|
"h2-mobile": ["1.75rem", { lineHeight: "1.2" }], // 28px
|
|
"h3-mobile": ["1.5rem", { lineHeight: "1.2" }], // 24px
|
|
"h4-mobile": ["1.25rem", { lineHeight: "1.2" }], // 20px
|
|
"h5-mobile": ["1.1rem", { lineHeight: "1.2" }], // 17.6px
|
|
"h6-mobile": ["1rem", { lineHeight: "1.2" }], // 16px
|
|
|
|
// Desktop sizes
|
|
h1: ["3rem", { lineHeight: "1.2" }],
|
|
h2: ["2.7rem", { lineHeight: "1.2" }],
|
|
h3: ["2.25rem", { lineHeight: "1.2" }],
|
|
h4: ["2rem", { lineHeight: "1.2" }],
|
|
h5: ["1.75rem", { lineHeight: "1.2" }],
|
|
h6: ["1.5rem", { lineHeight: "1.2" }],
|
|
},
|
|
colors: {
|
|
mytheme: {
|
|
50: "#ecfcfb",
|
|
100: "#caf3f4",
|
|
200: "#a9e0eb",
|
|
300: "#8ac9e0",
|
|
400: "#6cabd4",
|
|
500: "#4c99ca",
|
|
600: "#3678ab",
|
|
700: "#23558a",
|
|
800: "#133664",
|
|
900: "#071a3b",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
// exposes the colors in the theme as --tw-mytheme-50, --tw-mytheme-100, etc. in :root
|
|
require("@tailwind-plugin/expose-colors")({
|
|
extract: ["mytheme"],
|
|
}),
|
|
],
|
|
};
|