h2 @ “text-4xl” 
h2 @ “text-5xl”
https://ubifpg-dev.nfshost.com/_tailwind/
https://tailwindcss.com/docs/font-size
“rem” is a relative unit based on the root font size (16px in our case, usually ~16px – 20px)
Our Tailwind config file (tailwind.config.js)
module.exports = {
important: true,
purge: {
content: ["components/**/*.vue", "layouts/**/*.vue", "pages/**/*.vue"],
layers: ["components"],
},
darkMode: false, // or 'media' or 'class'
theme: {
screens: {
md: '600px',
lg: '782px',
xl: '1152px',
'2xl': '1440px'
},
// maxWidth: {
// "case-single": "1199px",
// "6xl": "4rem"
// },
maxHeight: {
photo: "50rem",
},
colors: {
blue: "#0f66ff",
white: "#fff",
pink: "#FB5373",
"div-grey": "#979797",
"burnt": "#ef4300",
},
fontSize: {
xs: ".75rem",
tiny: ".875rem",
sm: ".8889rem",
base: "1rem",
lg: "1.125rem",
xl: "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem",
"5xl": "3rem",
"6xl": "4rem",
"7xl": "5rem",
"8xl": "6rem",
head: "50px",
"sub-head": "30px",
body: "18px",
},
fontFamily: {
head: ["Futura-Medium"],
body: ["Newsreader"],
},
textColor: {
pink: "#FB5373",
white: "#FFFFFF",
grey: "#2B3034",
"h5-grey": "#979797",
green: "#13C9B1",
"body-grey": "#333333"
},
backgroundColor: (theme) => ({
...theme("colors"),
grey: "#2B3034",
"quote-grey": "#f2f2f2",
pink: "#FB5373",
"back-grey": "#F4F4F5",
}),
borderColor: (theme) => ({
...theme("colors"),
"burnt": "#ef4300",
}),
extend: {
},
},
variants: {
extend: {},
},
plugins: [],
};
THWD 