tailwind.config.ts

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

export default {
  content: ['index.html', 'src/**/*.tsx'],
  theme: {
    extend: {
      screens: {
        '2xs': '340px',
        xs: '480px',
        rxs: { max: '480px' },
      },
      fontFamily: {
        sans: ['Rubik', ...defaultTheme.fontFamily.sans],
        bree: ['Bree', 'sans-serif'],
        rubik: ['Rubik', 'sans-serif'],
        tajawal: ['Tajawal', 'sans-serif'],
        titillium: ['Titillium Web', 'sans-serif'],
      },
      colors: {
        grad: {
          100: '#080A0D',
          200: '#151515',
          300: '#1B292E',
          400: '#01514E',
          500: '#1E6972',
          600: '#018480',
          700: '#01A8A1',
          DEFAULT: '#01A8A1',
        },
      },
      transitionDuration: {
        250: '250ms',
      },
      borderRadius: {
        inherit: 'inherit',
        '4xl': '34px',
        '5xl': '46px',
      },
    },
  },
  plugins: [
    plugin(({ addVariant }) => {
      addVariant('hocus', ['&:hover', '&:focus-visible'])
    }),
  ],
} satisfies Config