Tailwind CSS integration

[styles102]

• added basic colours (can be amended to as and when)
• added container queries plugin (something I want to start using as media quires can be a bit restrictive and not a catch all solution)

[hades200082]

@styles102 Looks good so far. Still needs the theme support.

[styles102]

@styles102 Looks good so far. Still needs the theme support.

@hades200082 I not sure this is possible. As far as I can tell you added additional "themes" by using modifiers such as dark: for dark mode and contrast-more: for additional contrast options. Their isn't anything that we need to specifically setup other than additional colours which will be design specific. For example a project might not need a dark mode so their isn't any point in adding a dark-branding-primary colour to the tailwind config as it will never be used and is just extra overhead for the sake of it. I say that if a project needs additional themes (dark mode/high contrast) we deal with it specifically in that repo/project as it will be a chargeable extra and therefore will have additional budget to do the required work. We can have a chat about this if you want?

[hades200082]

What we do need is a component/mechanism by which to switch themes and a means by which to allow Tailwind to select and apply the correct/selected theme.

If we have light & dark themes we could also build in something that detects the users' preferences and picks the appropriate one by default.

I think we're crossing wires on this a little with what Tailwind's docs call a theme.

Take a look at:

• https://stackoverflow.com/questions/69150928/how-to-create-multiple-themes-using-tailwind-css
• https://dev.to/ohitslaurence/creating-dynamic-themes-with-react-tailwindcss-59cl

This task aims to provide the ability in projects based on this template app to have multiple themes defined.

A simple project might have just one theme. Another might have two - light and dark.

When we get into AAA accessibility we'll likely be dealing with multiple themes aimed at different types of vision issues such as using different pallets to aid people with different varieties of colour blindness. There might be a theme that is high contrast, another that uses larger text, etc.

The one thing we need to enable any of that is the ability to have multiple themes and a way for the user to switch between them.

[styles102]

@hades200082 take a look at this theme switcher I've added. Let me know what you think. Thanks