200 lines
5.8 KiB
TypeScript
200 lines
5.8 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
import defaultTheme from "tailwindcss/defaultTheme";
|
|
|
|
export default {
|
|
content: [
|
|
"./app/components/**/*.{js,vue,ts}",
|
|
"./app/layouts/**/*.vue",
|
|
"./app/pages/**/*.vue",
|
|
"./app/plugins/**/*.{js,ts}",
|
|
"./app/app.vue",
|
|
"./app/error.vue",
|
|
"./app/**/*.{js,vue,ts}",
|
|
"./content/**/*.{md,mdc,json,yml,yaml}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ["Inter var", ...defaultTheme.fontFamily.sans],
|
|
serif: ["Crimson Text", "Georgia", ...defaultTheme.fontFamily.serif],
|
|
},
|
|
typography: ({ theme }) => ({
|
|
DEFAULT: {
|
|
css: {
|
|
fontFamily: "'Crimson Text', Georgia, serif",
|
|
fontSize: "1.125rem",
|
|
lineHeight: "1.8",
|
|
color: theme("colors.gray.900"),
|
|
maxWidth: "none",
|
|
h1: {
|
|
fontFamily: "'Crimson Text', Georgia, serif",
|
|
fontWeight: "700",
|
|
fontSize: "2.5rem",
|
|
marginTop: "2rem",
|
|
marginBottom: "1rem",
|
|
lineHeight: "1.2",
|
|
},
|
|
h2: {
|
|
fontFamily: "'Crimson Text', Georgia, serif",
|
|
fontWeight: "600",
|
|
fontSize: "2rem",
|
|
marginTop: "1.75rem",
|
|
marginBottom: "0.75rem",
|
|
lineHeight: "1.3",
|
|
},
|
|
h3: {
|
|
fontFamily: "'Crimson Text', Georgia, serif",
|
|
fontWeight: "600",
|
|
fontSize: "1.5rem",
|
|
marginTop: "1.5rem",
|
|
marginBottom: "0.5rem",
|
|
lineHeight: "1.4",
|
|
},
|
|
p: {
|
|
marginTop: "1.25rem",
|
|
marginBottom: "1.25rem",
|
|
fontSize: "1.125rem",
|
|
lineHeight: "1.8",
|
|
color: theme("colors.gray.700"),
|
|
},
|
|
li: {
|
|
marginTop: "0.5rem",
|
|
marginBottom: "0.5rem",
|
|
fontSize: "1.125rem",
|
|
lineHeight: "1.8",
|
|
},
|
|
"ul > li": {
|
|
paddingLeft: "1.75rem",
|
|
},
|
|
"ol > li": {
|
|
paddingLeft: "1.75rem",
|
|
},
|
|
"ol li::marker": {
|
|
color: theme("colors.gray.400"),
|
|
fontWeight: "600",
|
|
},
|
|
"ul li::marker": {
|
|
color: theme("colors.gray.400"),
|
|
},
|
|
a: {
|
|
color: theme("colors.blue.600"),
|
|
textDecoration: "underline",
|
|
fontWeight: "500",
|
|
"&:hover": {
|
|
color: theme("colors.blue.800"),
|
|
},
|
|
},
|
|
strong: {
|
|
fontWeight: "700",
|
|
},
|
|
code: {
|
|
fontFamily:
|
|
"'SFMono-Regular', ui-monospace, 'JetBrains Mono', monospace",
|
|
fontSize: "0.875em",
|
|
fontWeight: "500",
|
|
backgroundColor: theme("colors.gray.100"),
|
|
padding: "0.15em 0.35em",
|
|
borderRadius: theme("borderRadius.lg"),
|
|
},
|
|
"code::before": {
|
|
content: '""',
|
|
},
|
|
"code::after": {
|
|
content: '""',
|
|
},
|
|
blockquote: {
|
|
fontStyle: "italic",
|
|
borderLeftColor: theme("colors.gray.300"),
|
|
borderLeftWidth: "0.25rem",
|
|
paddingLeft: "1rem",
|
|
marginTop: "1.5rem",
|
|
marginBottom: "1.5rem",
|
|
color: theme("colors.gray.600"),
|
|
},
|
|
pre: {
|
|
fontFamily:
|
|
"'SFMono-Regular', ui-monospace, 'JetBrains Mono', monospace",
|
|
backgroundColor: theme("colors.gray.100"),
|
|
borderRadius: theme("borderRadius.xl"),
|
|
padding: "1.5rem",
|
|
color: theme("colors.gray.800"),
|
|
},
|
|
hr: {
|
|
borderColor: theme("colors.gray.200"),
|
|
},
|
|
},
|
|
},
|
|
lg: {
|
|
css: {
|
|
fontSize: "1.25rem",
|
|
lineHeight: "1.8",
|
|
p: {
|
|
fontSize: "1.25rem",
|
|
lineHeight: "1.8",
|
|
},
|
|
li: {
|
|
fontSize: "1.25rem",
|
|
lineHeight: "1.8",
|
|
},
|
|
h1: {
|
|
fontSize: "3rem",
|
|
},
|
|
h2: {
|
|
fontSize: "2.25rem",
|
|
},
|
|
h3: {
|
|
fontSize: "1.75rem",
|
|
},
|
|
},
|
|
},
|
|
invert: {
|
|
css: {
|
|
color: theme("colors.gray.100"),
|
|
h1: {
|
|
color: theme("colors.gray.100"),
|
|
},
|
|
h2: {
|
|
color: theme("colors.gray.100"),
|
|
},
|
|
h3: {
|
|
color: theme("colors.gray.100"),
|
|
},
|
|
h4: {
|
|
color: theme("colors.gray.100"),
|
|
},
|
|
h5: {
|
|
color: theme("colors.gray.100"),
|
|
},
|
|
h6: {
|
|
color: theme("colors.gray.100"),
|
|
},
|
|
strong: {
|
|
color: theme("colors.gray.100"),
|
|
},
|
|
a: {
|
|
color: theme("colors.blue.400"),
|
|
"&:hover": {
|
|
color: theme("colors.blue.300"),
|
|
},
|
|
},
|
|
blockquote: {
|
|
borderLeftColor: theme("colors.gray.700"),
|
|
color: theme("colors.gray.300"),
|
|
},
|
|
code: {
|
|
color: theme("colors.gray.100"),
|
|
backgroundColor: theme("colors.gray.800"),
|
|
},
|
|
pre: {
|
|
backgroundColor: theme("colors.gray.800"),
|
|
color: theme("colors.gray.100"),
|
|
},
|
|
hr: {
|
|
borderColor: theme("colors.gray.700"),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
} satisfies Config;
|