tailwind.config.ts

import type { Config } from 'tailwindcss';
import { fontFamily } from 'tailwindcss/defaultTheme';
import plugin from 'tailwindcss/plugin';

export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,svelte,ts,tsx,vue}', '!./src/pages/og-image/[slug].png.ts'],
  darkMode: ['class', '[data-theme="dark"]'],
  corePlugins: {
    // disable aspect ratio as per docs -> @tailwindcss/aspect-ratio
    aspectRatio: false,
    // disable some core plugins as they are included in the css, even when unused
    touchAction: false,
    ringOffsetWidth: false,
    ringOffsetColor: false,
    scrollSnapType: false,
    borderOpacity: false,
    textOpacity: false,
    fontVariantNumeric: false,
  },
  theme: {
    extend: {
      colors: {
        bgColor: 'hsl(var(--theme-bg) / <alpha-value>)',
        textColor: 'hsl(var(--theme-text) / <alpha-value>)',
        link: 'hsl(var(--theme-link) / <alpha-value>)',
        accent: 'hsl(var(--theme-accent) / <alpha-value>)',
        'accent-2': 'hsl(var(--theme-accent-2) / <alpha-value>)',
        quote: 'hsl(var(--theme-quote) / <alpha-value>)',
      },
      fontFamily: {
        // Add any custom fonts here
        sans: [...fontFamily.sans],
        serif: [...fontFamily.serif],
      },
      transitionProperty: {
        height: 'height',
      },
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      // Remove above once tailwindcss exposes theme type
      typography: (theme) => ({
        cactus: {
          css: {
            '--tw-prose-body': theme('colors.textColor / 1'),
            '--tw-prose-headings': theme('colors.accent-2 / 1'),
            '--tw-prose-links': theme('colors.textColor / 1'),
            '--tw-prose-bold': theme('colors.textColor / 1'),
            '--tw-prose-bullets': theme('colors.textColor / 1'),
            '--tw-prose-quotes': theme('colors.quote / 1'),
            '--tw-prose-code': theme('colors.textColor / 1'),
            '--tw-prose-hr': '0.5px dashed #666',
            '--tw-prose-th-borders': '#666',
          },
        },
        DEFAULT: {
          css: {
            a: {
              '@apply cactus-link no-underline': '',
            },
            strong: {
              fontWeight: '700',
            },
            code: {
              border: '1px dotted #666',
              borderRadius: '2px',
            },
            blockquote: {
              borderLeftWidth: '0',
            },
            hr: {
              borderTopStyle: 'dashed',
            },
            thead: {
              borderBottomWidth: 'none',
            },
            'thead th': {
              fontWeight: '700',
              borderBottom: '1px dashed #666',
            },
            'tbody tr': {
              borderBottomWidth: 'none',
            },
            tfoot: {
              borderTop: '1px dashed #666',
            },
            sup: {
              '@apply ms-0.5': '',
              a: {
                '@apply bg-none': '',
                '&:hover': {
                  '@apply text-link no-underline bg-none': '',
                },
                '&:before': {
                  content: "'['",
                },
                '&:after': {
                  content: "']'",
                },
              },
            },
          },
        },
        sm: {
          css: {
            code: {
              fontSize: theme('fontSize.sm')[0],
              fontWeight: '400',
            },
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    plugin(function ({ addComponents }) {
      addComponents({
        '.cactus-link': {
          '@apply bg-[size:100%_6px] bg-bottom bg-repeat-x': {},
          backgroundImage: 'linear-gradient(transparent,transparent 5px,hsl(var(--theme-text)) 5px,hsl(var(--theme-text)))',
          '&:hover': {
            backgroundImage: 'linear-gradient(transparent,transparent 4px,hsl(var(--theme-link)) 4px,hsl(var(--theme-link)))',
          },
        },
        '.title': {
          '@apply text-2xl font-semibold text-accent-2': {},
        },
      });
    }),
  ],
} satisfies Config;