Add default colours and breakpoints for sizes to tailwind config

[LJSkinner]

Now that we are using the CLI, we should add the breakpoints and default colours to the config so that they can be used throughout the project.

[LJSkinner]

Small reminder that we definitely want to make our XL target larger than some of the websites we looked at for examples in #3. 1440p at least.

[LJSkinner]

@AndrewMcGuckin I've created a dev branch for this. We can follow something like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["src/**/*.{html,js}"],
  theme: {
    screens: {
      sm: "480px",
      md: "768px",
      lg: "976px",
      xl: "1440px"
    },
    extend: {
      colors: {
        darkNavyGrey: "#404258",
        lightGrey: "#6B728E",
        lightNavyGrey: "#474E68",
        navyGreyPurple: "#50577A"
      }
    },
  },
  plugins: [],
}

The breakpoints can probably stay roughly the same but I'll let you add the colours we need. Let me know how this goes. 👍

[AndrewMcGuckin]

@LJSkinner I used the following breakpoints on my site, I found tailwinds defaults to be useful but lacking for the larger screen sizes. To use both we can just extend for the larger screens that we need to cover. Of course this site is different so we can trial both sets of breakpoints to see what works best.

theme: {
    extend: {
      screens: {
        '3xl': '1920px',
        '3.5xl': '2336px',
        '4xl': '2560px',
        '5xl': '3840px',
      },

The defaults are as follows:

theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }

[AndrewMcGuckin]

@LJSkinner For the names of colours, it can be quite difficult to come up with memorable names. This converter takes a hex colour code and matches it with the closest tailwind colour. It seems to be designed for tailwind v2 rather than v3 that we are currently using so some of the names are invalid.

I propose that we use the names that are produced from this calculator as the names for our colours even if they are slightly different to the tailwind colours it matches since those names are no longer officially used.

[LJSkinner]

@LJSkinner For the names of colours, it can be quite difficult to come up with memorable names. This converter takes a hex colour code and matches it with the closest tailwind colour. It seems to be designed for tailwind v2 rather than v3 that we are currently using so some of the names are invalid.

I propose that we use the names that are produced from this calculator as the names for our colours even if they are slightly different to the tailwind colours it matches since those names are no longer officially used.

@AndrewMcGuckin

This is fine by me. Feel free to implement this that way, and then can we close this small issue.