module.exports = { content: ['./src/**/*.{html,js,tsx}', './components/**/*.{js,ts,jsx,tsx}'], theme: { extend: { colors: { primaryColor: '#E17446', primaryColorHover: '#db5b24', primaryText: '#111130', primaryBlue: '#2b5a9c', textLight: '#9e9ebc', Gray: '#8f9bad', f6f9fd: '#f6f9fd', dddddd: '#dddddd', inputborder: '#e8e8e8', borderColor: '#ebebeb', green: '#008f02', lightGreen: '#e2f2e2', orange: '#f05c00', orangeLight: '#fcede4', redLight: '#fde5e5', red: '#f00000', border1: '#ebebeb', themecolor: '#E17446', hoverthemecolor: '#db5b24', }, backgroundImage: { close: 'url(/public/images/colse.png)', trendBG1: 'url(../../public/images/blog-img.jpg)', }, boxShadow: { inputFocus: 'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px', headerFix: 'rgba(0, 0, 0, 0.1) 0px 10px 50px', sibarToggle: '-4px 5px 5px #0000000d', sibarToggleRTL: '5px -4px 6px #0000000d', }, spacing: { '5px': '5px', '10px': '10px', '14px': '14px', '15px': '15px', '18px': '18px', '20px': '20px', '25px': '25px', '30px': '30px', '35px': '35px', '40px': '40px', '45px': '45px', '50px': '50px', '55px': '55px', '60px': '60px', '65px': '65px', '70px': '70px', '75px': '75px', '80px': '80px', '85px': '85px', '90px': '90px', '95px': '95px', '100px': '100px', '106px': '106px', '120px': '120px', unset: 'unset', }, fontFamily: { charter: 'var(--charterFont)', sohne: 'var(--sohneFont)', poppins: 'var(--poppins)', gloock: 'var(--gloock)', }, fontSize: { 0: '0', '5px': '5px', '10px': '10px', '14px': '14px', '15px': '15px', '16px': '16px', '17px': '17px', '20px': '20px', '22px': '22px', '25px': '25px', '28px': '28px', '30px': '30px', '35px': '35px', '40px': '40px', '45px': '45px', '50px': '50px', '55px': '55px', '60px': '60px', '65px': '65px', '70px': '70px', '75px': '75px', '80px': '80px', '85px': '85px', '90px': '90px', '95px': '95px', '100px': '100px', unset: 'unset', }, lineHeight: { 1: '1', '5px': '5px', '10x': '10px', '15px': '15px', '19px': '19px', '22px': '22px', '20px': '20px', '25px': '25px', '28px': '28px', '30px': '30px', '32px': '32px', '35px': '35px', '36px': '36px', '40px': '40px', '42px': '42px', '46px': '46px', '45px': '45px', '50px': '50px', '52px': '52px', '55px': '55px', '60px': '60px', '65px': '65px', '70px': '70px', '75px': '75px', '80px': '80px', '85px': '85px', '90px': '90px', '95px': '95px', '100px': '100px', unset: 'unset', Normal: 'normal', }, zIndex: { 1: '9', 2: '99', 3: '999', 4: '9999', 5: '99999', 6: '999999', }, borderRadius: { '5px': '5px', '10px': '10px', '15px': '15px', }, screens: { 768: '768px', 992: '992px', 1200: '1200px', 1300: '1300px', 1400: '1400px', 1500: '1500px', 1600: '1600px', 1700: '1700px', }, animation: { slow: 'wiggle 2s linear', }, keyframes: { wiggle: { '0%': { transform: 'transform(164.25px)' }, '100%': { transform: 'rotate(0px)' }, }, }, }, }, }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter