Tailwind configuration

[janbaykara]

This PR adds the foundational design tokens from the Figma, based on Flowbite.

• Type scale
• Font families
• Spacing scale
• Colours
• Default text
• Rich text rendering

Motivation and Context

Context here is that, because we're using Flowbite as the underlying design system, it should be easy to check Figma for the correct classnames to apply to precisely produce the desired styling in HTML and CSS.

There are three CSS files that we should add stuff to, if required:

• frontend/scss/base.scss: this is for basic overriding styles that apply globally. Be very careful about this. Most always you'll want to define components or utilities and apply these in a scoped context in HTML.
• frontend/scss/components.scss: this is for composing utilities together into semantically named classes. For example, I can imagine us pretty soon implementing standard div.label and a.link component classes for use around the site in different places, although not all div and a elements want to be automatically styled that way.
• frontend/scss/utilities.scss: this is the place to add more tailwind-style class utilities here, named according to their visual effect (e.g. text-blue)

How Can It Be Tested?

As you build out UI, if you find that these classes aren't producing the expected visual output compared to Figma, we need to update the Tailwind file.

How Will This Be Deployed?

N/A

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• I've checked the spec (e.g. Figma file) and documented any divergences.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I've updated the documentation accordingly.
• Replace unused checkboxes with bullet points.

[linear]

HOT-219

[conatus]

Lovely stuff. Can we agree on a direction on consistent HTML quote usage please and then proceed?

[conatus]

The lint step of the CI job is failing. If you can see a quick fix, then we should fix. If it is more tricky, feel with should take an issue and proceed, a little later.

[janbaykara]

Agreed that the HTML autoformatting would be nice. Unfortunately prettier breaks django template language syntax, will have a quick google for an alternative but otherwise will park that request in the backlog.

[janbaykara]

Cool, now we have a pretty good Django HTML linter and code formatter! It will auto-reindent HTML which is nice, and will alert us to bad HTML practice like mixed quotes and unclosed tags and things like that — we'll have to fix them but they're pretty easy to fix. This has been added to:

• pre-commit, which will reindent HTML and output lint errors
• ci, which will output lint errors

Example linting error:

app/templates/base.html

H008 39:8 Attributes should be double quoted. <div class='flex fle
H017 40:12 Tag should be self closing. <br>

[janbaykara]

Oh god, not this setuptools nightmare again... I previously saw this in https://github.com/commonknowledge/leftbookclub

python-poetry/poetry#4242

[janbaykara]

Wehey! @conatus I managed to solve all sorts of CI issues alongside Django HTML formatting and linting.

[conatus]

Good work. Feels like a stronger version of the CI setup which will ensure a higher code quality immediately, so worthwhile in the round.