Introduce Tailwind CSS for layouting (viewport sizes, margins, paddings, etc)

[kulmann]

Initial Checklist

• I understand this is a user story and questions should be posted in the Community Discussions
• I searched issues and couldn’t find anything (or linked relevant results below)

User Story

• As a developer, I want to use a rock solid layouting system so that I don't need to fix all the edge cases myself.
• As a user I want a fast UI so that I dont have to wait.
• As a company, we want the web UI to be fast so that users can fully experience the performance of OpenCloud.

User Value (developer facing)

• Don't re-invent the wheel. We want as little custom code as possible for being able to develop really fast with high quality for the upcoming groupware components.
• Speed: Experience the performance of OpenCloud.

Acceptance Criteria

• Tailwind CSS is used throughout the design system and the web mono-repo as a whole
• No more oc-p (padding), oc-m (margin), oc-flex (flexbox) is used (this could be done incrementally)
• Adjust the design system docs
• Delete the respective design system css classes
• Delete the sizing tokens of the design system (also in the theme.json in the opencloud repo if there is something about it).

[tbsbdr]

added speed as userstory/value

[JammingBen]

Checklist

• Set up Tailwind
• Migrate css properties to either utility classes (preferred whenever possible) or layers.
  • margin & padding (@JammingBen )
  • font/text (size, truncation, weight, decoration, line-height, text-align) @JammingBen
  • display (flex, block etc.) @AlexAndBear
  • width, height, max-width, max-height @JammingBen
  • colors (color, background-color, background) @JammingBen
  • borders (border, border-radius) @JammingBen
  • gaps @JammingBen
  • position (including top, left, right, bottom for absolute positions) @AlexAndBear
  • overflow @JammingBen
  • transition @JammingBen
  • box-shadow @JammingBen
  • z-index @tammi-23
  • opacity @JammingBen
  • everything else (probably smaller stuff)
• Make sure we use the tailwind breakpoint variables everywhere @JammingBen
• Check left-over utility classes (scss files in the design-system). If it makes sense, migrate them either to components (via utility classes or component CSS) or the layers.css file @JammingBen
• Make design system docs work
• Make IDE autocompletion for Tailwind classes work everywhere in the project (currently only works in the design-system for some reason) > you need to put the path to the tailwind.css file into the extension config in your IDE
• export tailwind.css file in design-systems so other apps can import and use it @JammingBen
• Does it make sense to split the layers.css file? -> I'd say not for now.
• Remove color token generation OR move it do docs only @JammingBen
• OcCard into dedicated component @kulmann
• Check if we should scope the new style blocks @JammingBen
• Check if we need to remove any theming options (e.g. font-size, breakpoints etc.)
• Adjust design-system docs (remove outdated parts about e.g. spacing, adjust README on how to use the design-system with tailwind as an external app)
• Add migration guide to design-system docs