{"size": 3762, "ext": "js", "max_stars_repo_path": "website/tailwind.config.js", "max_stars_repo_name": "atomiks/mdx-pretty-code", "max_stars_repo_stars_event_min_datetime": "2021-12-07T20:12:48.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-06T15:01:34.000Z", "max_issues_repo_path": "website/tailwind.config.js", "max_issues_repo_name": "atomiks/rehype-pretty-code", "max_issues_repo_issues_event_min_datetime": "2022-01-07T05:42:47.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-29T09:02:39.000Z", "max_forks_repo_path": "website/tailwind.config.js", "max_forks_repo_name": "atomiks/mdx-pretty-code", "max_forks_repo_forks_event_min_datetime": "2021-12-07T20:17:55.000Z", "max_forks_repo_forks_event_max_datetime": "2022-01-05T20:47:52.000Z"}
{"max_stars_count": 158, "max_issues_count": 23, "max_forks_count": 10, "avg_line_length": 28.7175572519, "max_line_length": 80, "alphanum_fraction": 0.3856990962}
const colors = require('tailwindcss/colors');

const linkHeadingStyles = {
  color: colors.gray[100],
  borderBottomColor: 'transparent !important',
  '&:hover': {
    color: `${colors.gray[900]} !important`,
  },
};

module.exports = {
  plugins: [require('@tailwindcss/typography')],
  content: [
    './pages/**/*.{js,ts,jsx,tsx,md,mdx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      typography: {
        xl: {
          css: {
            pre: {
              padding: '0.75rem 0',
              lineHeight: '2.25',
              fontSize: '1rem',
            },
          },
        },
        lg: {
          css: {
            code: {
              '> .line': {
                borderLeft: `2px solid transparent`,
              },
            },
          },
        },
        DEFAULT: {
          css: {
            'h1,h2,h3,h4,h5,h6': {color: colors.white},
            'h2 a': linkHeadingStyles,
            'h3 a': linkHeadingStyles,
            'h4 a': linkHeadingStyles,
            'h5 a': linkHeadingStyles,
            'h6 a': linkHeadingStyles,
            blockquote: {
              fontSize: '90%',
              color: colors.zinc[500],
              borderLeftColor: colors.zinc[700],
              'p::before': {
                display: 'none',
              },
              'p::after': {
                display: 'none',
              },
            },
            a: {
              textDecoration: 'none',
              borderBottom: `2px solid ${colors.cyan[800]}`,
              color: colors.cyan[400],
              transition:
                'color 0.2s ease, border-color 0.2s ease, background 0.2s ease',
              '&:hover': {
                color: `${colors.zinc[900]} !important`,
                borderBottomColor: `${colors.cyan[200]} !important`,
                background: colors.cyan[200],
              },
            },
            code: {
              color: '#86e1fc',
              '&::before': {
                content: `"" !important`,
              },
              '&::after': {
                content: `"" !important`,
              },
              fontWeight: 'normal',
            },
            '[data-rehype-pretty-code-fragment]:nth-of-type(2) pre': {
              '.line::before': {
                content: 'counter(line)',
                counterIncrement: 'line',
                display: 'inline-block',
                width: '1rem',
                marginRight: '1rem',
                textAlign: 'right',
                color: colors.slate[600],
              },

              '.line--highlighted::before': {
                color: colors.slate[400],
              },
            },
            pre: {
              opacity: 0.98,
              background: 'rgba(200,200,255,0.05)',
              padding: '0.75rem 0',
              lineHeight: 2,

              '> code': {
                display: 'grid',
                counterReset: 'line',

                '.word': {
                  background: 'rgba(200,200,255,0.15)',
                  padding: '0.25rem',
                  borderRadius: '0.25rem',
                },
                '> .line': {
                  padding: '0 1.25rem',
                  borderLeft: `2px solid transparent`,
                },
                '> .line.line--highlighted': {
                  background: 'rgba(200,200,255,0.1)',
                  borderLeftColor: colors.blue[400],
                },
              },
            },
            ':not(pre) > code': {
              background: 'rgba(200,200,255,0.1)',
              padding: '0.25rem',
              fontSize: '0.95rem !important',
              borderRadius: '0.25rem',
            },
          },
        },
      },
    },
  },
};
