Consistent and reusable styling, as required in #42, boils down to two principles closely related to component-driven or Atomic design:
Abstracting out styled components (for example, creating something like <Header/>, which renders the title of an entity and the type of entity as a <Pill/>, and is used both within a <Tweet/>, <Account/>. This would make styling updates easy as we have a single source of truth. This will avert things like buttons being inconsistently sized, as we can reuse a <Button/> across the app.
Styling overrides and extensions in tailwind.config.js according to the design system. For example, right now we have a new class called text-xxs which renders 0.5rem text. This will align out-of-box tailwind with our design system in Figma, giving us the speed/ease of writing with the CSS framework, while giving us the fine-grained polish of our design.
While (1) can be approached incrementally/procedurally, (2) should ideally be done only when we have finalised a major version in Figma, as it's cumbersome to write.
Consistent and reusable styling, as required in #42, boils down to two principles closely related to component-driven or Atomic design:
Abstracting out styled components (for example, creating something like
<Header/>, which renders the title of an entity and the type of entity as a<Pill/>, and is used both within a<Tweet/>,<Account/>. This would make styling updates easy as we have a single source of truth. This will avert things like buttons being inconsistently sized, as we can reuse a<Button/>across the app.Styling overrides and extensions in
tailwind.config.jsaccording to the design system. For example, right now we have a new class calledtext-xxswhich renders0.5remtext. This will align out-of-box tailwind with our design system in Figma, giving us the speed/ease of writing with the CSS framework, while giving us the fine-grained polish of our design.While (1) can be approached incrementally/procedurally, (2) should ideally be done only when we have finalised a major version in Figma, as it's cumbersome to write.