const plugin = require('tailwindcss/plugin') module.exports = { content: ['./build/**/*.html'], safelist: ['mt-12', 'mt-16', 'mt-20', 'mt-24', 'mt-32', 'mt-40', 'mb-16', 'mb-20', 'mb-24', 'mb-32', 'mb-40'], theme: { screens: { 'sm': '40rem', 'md': '48rem', 'lg': '62rem', 'xl': '80rem', '2xl': '120rem', '3xl': '128rem' }, fontFamily: { sans: ['Standard', 'sans-serif'] }, fontSize: { 'sm': ['13px', '20px'], 'base': ['16px', '25px'], 'md': ['20px', '30px'], 'md-lg': ['26px', '35px'], 'lg': ['30px', '40px'], 'xl': ['44px', '55px'], 'xl-md': ['40px', '50px'], '2xl': ['58px', '70px'], '2xl-md': ['54px', '65px'], '3xl': ['90px', '105px'] }, colors: { yellow: { 100: '#FFCC00', 200: '#E5B700', 300: '#9E7F00', 400: '#6E5800' }, white: '#FFFFFF', grey: { 100: '#F2F5F5', 200: '#D3D8D8', 300: '#6E7878', 400: '#8D9797', 500: '#535A5A' }, black: '#000000', success: '#3EE976', warning: '#FFAC00', error: '#F8445A', transparent: 'transparent' }, extend: { spacing: { '3.75': '0.9375rem', '6.25': '1.5625rem', '7.5': '1.875rem', '8.75': '2.1875rem', '12.5': '3.125rem', '15': '3.75rem', '25': '6.25rem', 'xxs': '0.5rem', 'xs': '1.125rem', 'sm': '1.5625rem', 'base': '2.5rem', 'md': '3.125rem', 'lg': '4.5rem', 'xl': '7.5rem' }, lineHeight: { } } }, plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { '.position-center': { top: '50%', left: '50%', transform: 'translateX(-50%) translateY(-50%)' }, '.position-center-horizontal': { left: '50%', transform: 'translateX(-50%)' }, '.position-center-vertical': { top: '50%', transform: 'translateY(-50%)' } } addUtilities(newUtilities) }) ] }