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 "@apply font-normal text-black bg-gray-50 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 border": {},
40 },
41 code: {
42 "@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": {},
43 },
44 "code::before": {
45 content: '""',
46 },
47 "code::after": {
48 content: '""',
49 },
50 blockquote: {
51 quotes: "none",
52 },
53 'h1, h2, h3, h4': {
54 "@apply mt-4 mb-2": {}
55 },
56 h1: {
57 "@apply mt-3 pb-3 border-b border-gray-300 dark:border-gray-600": {}
58 },
59 h2: {
60 "@apply mt-3 pb-3 border-b border-gray-200 dark:border-gray-700": {}
61 },
62 h3: {
63 "@apply mt-2": {}
64 },
65 },
66 },
67 },
68 gridTemplateColumns: {
69 '14': 'repeat(14, minmax(0, 1fr))',
70 '28': 'repeat(28, minmax(0, 1fr))',
71 }
72 },
73 },
74 plugins: [require("@tailwindcss/typography")],
75};