-
Notifications
You must be signed in to change notification settings - Fork 4.9k
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
feat: migrate text and headings to tailwind #13386
feat: migrate text and headings to tailwind #13386
Conversation
…t/shadcn-migrate-text
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great @TylerAPfledderer
Looks good from the code side. I'll double check later on the preview deploy if there's no other part affected by the breaking changes you mentioned.
@@ -141,13 +146,41 @@ | |||
|
|||
@layer base { | |||
body { | |||
@apply bg-background font-body leading-base text-body; | |||
@apply bg-background font-body text-body text-sm lg:text-md; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we can delete the global styles from Chakra now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
The Accordion case that you mentioned is the only case where we are using a h2
tag and not a Heading
component. So, I've tested the app and it looks like everything is working fine. We should be good.
Description
Migrates text and heading styles to Tailwind
Text
andHeading
components.global.css
Flex
andCenter
stacking components locallyBreaking Changes
Due to the approach taken to styling the heading levels, this might create some unexpected results when removing the
Heading
components in prod.For example, see instances where the
Accordion
is currently used. Provided an initial fix for the accordion story to revert the heading styling toinitial
(essentially "unsetting" the font-size and font-weight styles). When the accordion migration is addressed, will need to favor this same approach or use a CSS selector to override or ignore the declared heading level styles, then add to the styles for specific renders.Related Issue
Continuation of #13382