Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ADR-0005] support component styling with tailwind css in design system #823

Merged
merged 5 commits into from
Nov 2, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions doc/adr/0005-use-tailwind-in-design-system.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# 5. Integrate Tailwind CSS into Design System for Styling

Date: 2023-10-24

## Status

Accepted

## Context

As of now, the design system doesn't provide a way to style components.
All of the styling has to be done in the `ui` package. why do we want to styling in design system?
Well, if we want to showcase how [Organisms](https://atomicdesign.bradfrost.com/chapter-2/#organisms) like Forms behave we need some basic styling support in design system as well.
The studio is already planning to use Tailwind CSS for its UI, making it a logical choice to consider Tailwind for the design system as well.

## Decision

We propose to integrate Tailwind CSS into our design system. This will allow us to use the tailwind utility classes in our design system as well, such as Forms.

## Consequences

- Tailwind utility classes will be usable in design system.
- Another tool (`concurently`) have to be used to run storybook and tailwind css side by side.
- design system will be more complex and harder to understand for newcomers.