import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}"
  ],

  theme: {
    
    screens: {
      '2xs': '320px',
      // => @media (min-width: 320px) { ... }

      'xs': '425px',
      // => @media (min-width: 425px) { ... }

      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }

      '3xl': '2000px',
      // => @media (min-width: 2000px) { ... }
    },
      extend: {
      fontFamily: {
        sans: ['KalamehWebFaNum', 'dana', 'Figtree', 'Vazirmatn', ...defaultTheme.fontFamily.sans],
      },
      colors: {
      '1' : '#ffffff',
      '2' : '#f3f4f6',
      '3' : '#e11d48',
      '4' : '#be123c',
      'purp' : '#9d174d',
    },
    },
  },

  plugins: [forms],
};