tw-md.md

/** @type {import('tailwindcss').Config} */

const plugin = require('tailwindcss/plugin') module.exports = {

//Dark mode toggle darkMode: 'class',

//Safelist utility classes to use variable dynamic styles safelist: [ { pattern: /animation-delay-(0|150|300|450|600|1000|2000|3000|4000)/, }, ],

content: [ "./src/components//*.{js,jsx,ts,tsx}", "./src/util//*.{js,jsx,ts,tsx}", "./src/App.js", "./public/index.html" ], theme: { extend: { colors: { EMPTY: "#121213", CORRECT: "#86efac", PRESENT: "#fef08a", ABSENT: "#a1a1aa" },

  fontFamily:{
    ATW: "American Typewriter",
    TMS: "Trebuchet MS"
  },

  keyframes: {
    Pop: {
      '0%': {transform : 'scale(.75)'},
      '50%': {transform : 'scale(1.1)'},
    },

    Shake: {
      '0%': {transform : 'translateX(-2px)'},
      '40%': {transform : 'translateX(4px)'},
    },

    Flip: {
      "50%" : {
        transform : 'rotateX(-90deg)'
      },
    },

    Bounce: {
      "20%" : {
        transform: 'translateY(-18px)',
      },
      "40%" : {
        transform: 'translateY(8px)', 
      },

      "60%" : {
        transform: 'translateY(-9px)', 
      },

      "80%" : {
        transform: 'translateY(-4px)',
      },
    },
  },

  animation: {
    pop: 'Pop 100ms ease-in-out 1',
    shake: 'Shake 150ms ease-in-out 2',
    flip: 'Flip 1000ms ease-in-out 1',
    bounce: 'Bounce 1000ms ease-in-out 1',
  },
},

}, plugins: [ plugin(function({ matchUtilities, addComponents, addUtilities, theme }) { //Animation delay utility Class matchUtilities( { 'animation-delay': (value) => ({ 'animation-delay' : value }), }, { values: theme('animationDelay') } )

  addUtilities({
    '.pb-full': {
      'padding-bottom': '100%',
    }
  })

  matchUtilities(
    {
      'wP': (value) => ({
        'width' : `${value}%`
      })
    },
    {
      values: {
        '10': '10'
      }
    }
  )

  
  matchUtilities(
    {
      'hP': (value) => ({
        'height' : `${value}%`
      })
    },
    {
      values: {
        '10%': '10'
      }
    }
  )
  

  //Component plugin for standard flexbox
  addComponents(
    {
      '.centerStage' : { 
        'display' : 'flex',
        'place-content' : 'center',
        'place-items' : 'center',

      }
    },
  )
},
//End of Additions

//Default values of plugins
{
  theme : {
    animationDelay : {
      0: '0ms',
      150: '150ms',
      300: '300ms',
      450: '450ms',
      600: '600ms',
      1000: '1000ms',
      2000: '2000ms',
      3000: '3000ms',
      4000: '4000ms',
    },
  }
})
//End of Plugin

], }