ethanreece.com/tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
const heropatterns = require('tailwindcss-hero-patterns/src/patterns')

module.exports = {
    content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    theme: {
        extend: {
            typography: {
                DEFAULT: {
                    css: {
                        color: 'black',
                        fontWeight: '200',
                        h1: {
                            paddingTop: '1rem',
                        },
                        'a:hover': {
                            background: 'black',
                            color: 'white',
                            textDecoration: 'none',
                        },
                    },
                },
            },
        },
        heroPatterns: {
            circuitboard: heropatterns.circuitboard,
        },
        heroPatternsOpacities: ['100'],
        heroPatternColors: ['font'],
        colors: {
            background: '#dbf6db',
            'background-dark': '#bbd8bb',
            'background-light': '#ffffff',
            'background-hover': '#000000cc',
            font: '#000000',
            'font-light': '#004f07',
            'font-hover': '#ffffff',
            pattern: 'rgba(0,0,0,.02)',
        },
        fontFamily: {
            main: ['JetBrains Mono Variable', 'monospace'],
        },
        backgroundSize: {
            contain: 'contain',
            circuitboard: '40rem',
        },
        spacing: {
            'screen-x': '1rem',
            'screen-y': '1.5rem',
            'navbar-h': '4rem',
            paragraph: '1rem',
        },
        maxWidth: {
            'page-w': '45rem',
        },
        zIndex: {
            navbar: '100',
        },
        screens: {
            sm: '640px',
            md: '768px',
        },
    },
    plugins: [
        require('tailwindcss-hero-patterns'),
        require('@tailwindcss/typography'),
    ],
}