engineering blog at https://blog.tangled.sh
tangled.org
1const colors = require("tailwindcss/colors");
2
3module.exports = {
4 content: ["./templates/**/*.html", "./pages/**/*.md"],
5 darkMode: "media",
6 theme: {
7 container: {
8 padding: "2rem",
9 center: true,
10 screens: {
11 sm: "500px",
12 md: "600px",
13 lg: "800px",
14 xl: "1000px",
15 "2xl": "1200px",
16 },
17 },
18 extend: {
19 fontFamily: {
20 sans: ["InterVariable", "system-ui", "sans-serif", "ui-sans-serif"],
21 mono: [
22 "IBMPlexMono",
23 "ui-monospace",
24 "SFMono-Regular",
25 "Menlo",
26 "Monaco",
27 "Consolas",
28 "Liberation Mono",
29 "Courier New",
30 "monospace",
31 ],
32 },
33 typography: {
34 DEFAULT: {
35 css: {
36 maxWidth: "75ch",
37 pre: {
38 backgroundColor: colors.gray[100],
39 color: colors.black,
40 "@apply font-normal text-black bg-gray-100 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 dark:border": {},
41 },
42 code: {
43 "@apply font-normal font-mono px-1 rounded text-black bg-gray-100 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700": {},
44 },
45 "code::before": {
46 content: '""',
47 },
48 "code::after": {
49 content: '""',
50 },
51 blockquote: {
52 quotes: "none",
53 },
54 },
55 },
56 },
57 },
58 },
59 plugins: [require("@tailwindcss/typography")],
60};