const { blogConfig } = require('./config/index.js'); const defaultTheme = require('tailwindcss/defaultTheme'); const colors = require('tailwindcss/colors'); /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], // enable dark mode darkMode: 'class', plugins: [ // used for markdown prose styling; see components/mdx-content.tsx require('@tailwindcss/typography'), ], theme: { screens: { xs: '475px', ...defaultTheme.screens, }, extend: { colors: { // theme colors; edit in config/index.js accent: { DEFAULT: blogConfig.theme?.accentColor?.light || colors.rose[700], dark: blogConfig.theme?.accentColor?.dark || colors.rose[300], }, }, fontFamily: { // uses next/font; see app/layout.tsx sans: ['var(--font-red-hat)'], //serif: ['var(--font-newsreader)'], serif: ['var(--font-arial)'], }, gridTemplateRows: { // main layout grid rows (header, main, footer) // see app/layout.tsx layout: '6rem minmax(calc(100vh - 16rem), 1fr) 10rem', }, gridTemplateColumns: { // main layout grid columns (left column, main, right column) // see app/layout.tsx layout: '1fr minmax(640px, 800px) 1fr', }, animation: { // border animation used in components/post-card.tsx border: 'show-border 0.5s ease-in-out forwards', 'border-fast': 'show-border 0.25s ease-in-out forwards', // wave animation used in components/hero-section.tsx wave: 'wave 2.5s ease-in-out forwards', }, keyframes: { 'show-border': { '0%': { zIndex: 20, width: '1rem', height: 'calc(100% - 1rem)', borderRadius: '0.4rem 0 0 0.4rem', }, '20%': { zIndex: 0, width: 0, height: '100%', borderRadius: '0.4rem 0 0 0.4rem', }, '100%': { zIndex: 0, width: '100%', height: '100%', borderRadius: '0.4rem 0.4rem 0.4rem 0.4rem', }, }, wave: { '0%': { transform: 'rotate(0.0deg)' }, '10%': { transform: 'rotate(-10.0deg)' }, '20%': { transform: 'rotate( 12.0deg)' }, '30%': { transform: 'rotate(-10.0deg)' }, '40%': { transform: 'rotate(9.0deg)' }, '50%': { transform: 'rotate(0.0deg)' }, '100%': { transform: 'rotate(0.0deg)' }, }, }, }, }, // these classes are added conditinally so they need to be whitelisted safelist: [{ pattern: /prose-(sm|base|lg|xl|2xl)/ }], };