Breakpoints

TailwindCSS can be used to utilise breakpoints in Codey. They provide a default list, but we had the need for more customisations.

Below is a list taken from the tailwind.config.js:

screens: {
    "mobile-small": { max: "374px" },
    mobile: "375px",
    tablet: "768px",
    laptop: "1280px",
    desktop: "1920px",
},

These breakpoints are used by prefixing Tailwind utility classes. Some examples: mobile:bg-primary, tablet:flex, ...