tailwind.config.js

module.exports = {
  purge: {
    content: [
      `components/**/*.{vue,js}`,
      `layouts/**/*.vue`,
      `pages/**/*.vue`,
      `plugins/**/*.{js,ts}`,
      `nuxt.config.{js,ts}`,
    ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    zIndex: {
      0: 0,
      1: 1,
      2: 2,
      3: 3,
      10: 10,
      20: 20,
      30: 30,
      40: 40,
      50: 50,
      25: 25,
      50: 50,
      75: 75,
      100: 100,
      auto: 'auto',
    },
    colors: {
      primary: {
        extraLight: '#dcfce7',
        lighter1: '#6EE7B7',
        default: '#10B981',
      },
      white: '#FFF',
      black: '#1F2937',
      error: '#b71c1c',
    },
    borderWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
    fontSize: {
      btn: '2rem',
      xs: '.75rem',
      sm: '.875rem',
      tiny: '.875rem',
      base: '1.6rem',
      md: '2.4rem',
      lg: '3rem',
      xl: '1.25rem',
      '2xl': '1.5rem',
      '3xl': '1.875rem',
      '4xl': '2.25rem',
      '5xl': '3rem',
      '6xl': '4rem',
      '7xl': '5rem',
    },
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1440px',
      '2xl': '1536px',
    },
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.50rem',
      1: '1rem',
      1.5: '1.5rem',
      2: '2rem',
      2.5: '2.5rem',
      3: '3rem',
      3.5: '3.5rem',
      4: '4rem',
      5: '5rem',
      6: '6rem',
      7: '7rem',
      8: '8rem',
      9: '9rem',
      10: '10rem',
      11: '11rem',
      12: '12rem',
      14: '14rem',
      16: '16rem',
      20: '20rem',
      24: '24rem',
      28: '28rem',
      32: '32rem',
      36: '36rem',
      37: '37rem',
      40: '40rem',
      44: '44rem',
      48: '48rem',
    },
  },
  variants: {
    extend: {
      opacity: ['group-hover'],
      scale: ['group-hover'],
    },
  },
  // plugins: [require('@tailwindcss/forms')],
}