tailwind.config.js

const plugin = require('tailwindcss/plugin')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      gridTemplateColumns: {
        'bar': 'repeat(5, auto)',
      },
      spacing: {
        '300': '450px'
      },
      fontFamily: {
        roboto: ["RobotoMono", "sans-serif"],
        bioRhyme: ["BioRhyme", "sans-serif"],
      },
      fontSize: {
        '21':'21px',
      },
      colors:{
        'primary-color':'#F4EFE2',
        'second-color':'#c66a48',
        'third-color':'#4c4b10',
        'fourth-color':'#d44620',
      },
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic':
          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
        'hero-image': "url(/assets/background_hero.jpg)",
      },
      textShadow: {
        sm: '0 1px 2px var(--tw-shadow-color)',
        n: '0 2px 4px var(--tw-shadow-color)',
        lg: '0 8px 16px var(--tw-shadow-color)',
      },
    },
  },
  plugins: [
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'text-shadow': (value) => ({
            textShadow: value,
          }),
        },
        { values: theme('textShadow') }
      )
    }),
  ],
}