1/** @type {import('tailwindcss').Config} */
2const colors = require("tailwindcss/colors");
3
4module.exports = {
5 content: ["./appview/pages/templates/**/*.html", "./appview/pages/chroma.go"],
6 darkMode: "media",
7 theme: {
8 container: {
9 padding: "2rem",
10 center: true,
11 screens: {
12 sm: "500px",
13 md: "600px",
14 lg: "800px",
15 xl: "1000px",
16 "2xl": "1200px",
17 },
18 },
19 extend: {
20 fontFamily: {
21 sans: ["InterVariable", "system-ui", "sans-serif", "ui-sans-serif"],
22 mono: [
23 "IBMPlexMono",
24 "ui-monospace",
25 "SFMono-Regular",
26 "Menlo",
27 "Monaco",
28 "Consolas",
29 "Liberation Mono",
30 "Courier New",
31 "monospace",
32 ],
33 },
34 typography: {
35 DEFAULT: {
36 css: {
37 maxWidth: "none",
38 pre: {
39 backgroundColor: colors.gray[100],
40 color: colors.black,
41 "@apply font-normal text-black bg-gray-100 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 dark:border": {},
42 },
43 li: {
44 "@apply inline-block w-full my-0 py-0": {},
45 },
46 "ul, ol": {
47 "@apply my-1 py-0": {},
48 },
49 code: {
50 "@apply font-normal font-mono p-1 rounded text-black bg-gray-100 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700": {},
51 },
52 "code::before": {
53 content: '""',
54 },
55 "code::after": {
56 content: '""',
57 },
58 blockquote: {
59 quotes: "none",
60 },
61 'h1, h2, h3, h4': {
62 "@apply mt-4 mb-2": {}
63 },
64 h1: {
65 "@apply mt-3 pb-3 border-b border-gray-300 dark:border-gray-600": {}
66 },
67 h2: {
68 "@apply mt-3 pb-3 border-b border-gray-200 dark:border-gray-700": {}
69 },
70 h3: {
71 "@apply mt-2": {}
72 },
73 },
74 },
75 },
76 gridTemplateColumns: {
77 '14': 'repeat(14, minmax(0, 1fr))',
78 '28': 'repeat(28, minmax(0, 1fr))',
79 }
80 },
81 },
82 plugins: [require("@tailwindcss/typography")],
83};