tailwind.config.js

/** @type {import('tailwindcss').Config} */
const plugin = require('tailwindcss/plugin')

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        serif: ['var(--font-garamond)'],
        sans: ['var(--font-varela)'],
        body: ['var(--font-eb-garamond)'],
      },
      textShadow: {
        // 1px 1px 0 rgb(0 0 0 / 25%)
        DEFAULT: '-0.33px -0.33px 1px rgb(0 0 0 / 25%)', // change to var(--tw-some-var)
      },
    },
  },
  plugins: [
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'text-shadow': (value) => ({
            textShadow: value,
          }),
        },
        { values: theme('textShadow') },
      )
    }),
    require('tailwind-scrollbar-hide'),
  ],
}