tailwind.config.js

module.exports = {
  enabled: true,
  purge: [''],
  darkMode: 'class', // class, 'media' or boolean
  theme: {
    extend: {
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        primary: {
          DEFAULT: '#D6E4FF',
        },
        secondary: {
          DEFAULT: '#151515',
          light: '#1e1e1e',
          dark: '#000',
        },
        sideColor: {
          DEFAULT: '#5354E2',
          light: '#9FA0FF',
          dark: '#080834',
        },
      },
      spacing: {
        mini: '10%',
        "semi-mini": '15%',
        small: '25%',
        medium: '50%',
        big: '75%',
        "semi-big": '85%',
        SuperBig: '100%',
      },
      width: {
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
        '10%': '10%',
        '7%': '7%',
      },
      height: {
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
        '10%': '10%',
        '5%': '5%',
        '90vh': '90vh',
        '80vh': '80vh',
        '10vh': '10vh',
      },
      minWidth: {
        '0': '0',
        '1/10': '15%',
        '1/6': '16.66667%',
        '1/5': '20%',
        '1/4': '25%',
        '1/2': '50%',
        '1/3': '33.3333333%',
        '3/4': '75%',
        'md': '768px',
      },
      maxWidth: {
        '0': '0',
        '1/10': '15%',
        '1/6': '16.66667%',
        '1/5': '20%',
        '1/4': '25%',
        '1/2': '50%',
        '1/3': '33.3333333%',
        '3/4': '75%',
        'md': '768px',
      },
      minHeight: {
        '0': '0',
        '5%': '5%',
        '1/10': '15%',
        '1/6': '16.66667%',
        '1/5': '20%',
        '1/4': '25%',
        '1/2': '50%',
        '1/3': '33.3333333%',
        '3/4': '75%',
        '9/10': '90%',
        '90vh': '90vh',
      },
      maxHeight: {
        '0': '0',
        '5%': '5%',
        '1/10': '15%',
        '1/6': '16.66667%',
        '1/4': '25%',
        '1/2': '50%',
        '1/3': '33.3333333%',
        '3/4': '75%',
        '9/10': '90%',
      },
      fontFamily: {
        primary: 'Open Sans, sans-serif',
        secondary: '',
      }
    },
  },
  variants: {
    extend: {
      backgroundColor: ['active', 'group-focus'],
      content: ['group-focus'],
    },
  },
  plugins: [],
}