/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./templates/**/*.{html,js}"],
  darkMode: 'class', // or 'media' if you prefer the automatic system preference detection
  theme: {
    extend: {
      // Adding custom utility
      overflowWrap: {
        anywhere: 'anywhere',
      },
    },
  },
  plugins: [
    function ({ addUtilities }) {
      const newUtilities = {
        '.wrap-anywhere': {
          'overflow-wrap': 'anywhere',
        },
        '.wrap-word': {
          'overflow-wrap': 'break-word',
        },
        '.wrap-normal': {
          'overflow-wrap': 'normal',
        },
        '.border-l-1': {
          'border-left-width': '1px',
        },
        '.border-r-1': {
          'border-right-width': '1px',
        },
        '.border-t-1': {
          'border-top-width': '1px',
        },
        '.border-b-1': {
          'border-bottom-width': '1px',
        },
        '.border-1': {
          'border-width': '1px',
        },
        '.bg-ms': {
          'background-image': 'url(https://speakmore.olayzen.com/static/images/bg.svg);',
          'background-position-y': '50%',
          'background-position-x': '50%',
          'background-repeat': 'no-repeat',
          'background-size': 'cover',
        },
        '.ms-p': {
        'width': '440px',
        'height': '338px',
        'display': 'flex',
        'justify-content': 'center',
        'box-shadow': 'rgba(0, 0, 0, 0.2) 0px 2px 6px'
        }
      }

      addUtilities(newUtilities, ['responsive', 'hover'])
    },
  ],
}