1/** @type {import('tailwindcss').Config} */
2
3const defaultTheme = require('tailwindcss/defaultTheme');
4
5module.exports = {
6  darkMode: 'class',
7  content: [
8    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
9    '../packages/react/src/**/*.{html,js,jsx,md,mdx,ts,tsx}',
10  ],
11  theme: {
12    extend: {
13      keyframes: {
14        train: {
15          '0%': { transform: 'translateX(-100%)' },
16          '100%': { transform: 'translateX(100%)' },
17        },
18      },
19      animation: {
20        train: 'train 2s linear infinite',
21      },
22      colors: {
23        // codemirror-theme settings
24        background: 'var(--background)',
25        lineBackground: 'var(--lineBackground)',
26        foreground: 'var(--foreground)',
27        muted: 'var(--muted)',
28        caret: 'var(--caret)',
29        selection: 'var(--selection)',
30        selectionMatch: 'var(--selectionMatch)',
31        gutterBackground: 'var(--gutterBackground)',
32        gutterForeground: 'var(--gutterForeground)',
33        gutterBorder: 'var(--gutterBorder)',
34        lineHighlight: 'var(--lineHighlight)',
35      },
36      spacing: {
37        'app-height': 'var(--app-height)',
38        'app-width': 'var(--app-width)',
39      },
40      typography(theme) {
41        return {
42          DEFAULT: {
43            css: {
44              'code::before': {
45                content: 'none', // don’t wrap code in backticks
46              },
47              'code::after': {
48                content: 'none',
49              },
50              color: 'var(--foreground) !important',
51              a: {
52                color: 'var(--foreground) !important',
53              },
54              h1: {
55                color: 'var(--foreground) !important',
56              },
57              h2: {
58                color: 'var(--foreground) !important',
59              },
60              h3: {
61                color: 'var(--foreground) !important',
62              },
63              h4: {
64                color: 'var(--foreground) !important',
65              },
66              pre: {
67                color: 'var(--foreground) !important',
68                background: 'var(--background) !important',
69              },
70              code: {
71                color: 'var(--foreground) !important',
72              },
73            },
74          },
75        };
76      },
77    },
78  },
79  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
80};