[docs] Use IBM Plex Sans in Tailwind CSS demos #38464
Conversation
mnajdova
commented
Aug 14, 2023
mnajdova
commented
- I have followed (at least) the PR section of the contributing guide.
mnajdova
added
docs
Netlify deploy previewhttps://deploy-preview-38464--material-ui.netlify.app/ Bundle size report |
|
@zanivan can you check the demos to validate the font changes, please? On another note, I noticed that when the custom font family is added in sandbox it breaks the custom tailwind config, however, it works perfectly fine in the docs (broken sandbox - https://codesandbox.io/s/ymys9l?file=/public/index.html:1549-1575 fonts are not working, but also none of the custom tailwind config). It's likely related to the whole sandbox + create react app + CDN tailwind CSS setup. I am removing it for now, but it may be interesting to consider moving the sandbox and stackblitz demos to use vite instead of create-react-app. cc @mui/docs-infra |
| @@ -1,60 +0,0 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
These files were not removed when the Tailwind CSS + plain CSS demos were added.
| tailwind.config = { | ||
| theme: { | ||
| extend: { | ||
| animation: { |
There was a problem hiding this comment.
These are just ordered alphabetically
| @@ -19,7 +19,7 @@ const CustomButton = React.forwardRef((props, ref) => { | |||
| <Button | |||
| ref={ref} | |||
| className={clsx( | |||
| 'cursor-pointer disabled:cursor-not-allowed text-sm bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-md font-semibold px-4 py-2 border-none disabled:opacity-50', | |||
| 'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50', | |||
There was a problem hiding this comment.
I also fixed the wrong border radius, I just noticed the difference.
Only |
Nice catch! Fixed |
github-actions
bot
added
the
PR: out-of-date
Signed-off-by: Marija Najdova <[email protected]>
github-actions
bot
removed
the
PR: out-of-date
| fontFamily: { | ||
| sans: ['IBM Plex Sans', ...defaultTheme.fontFamily.sans], | ||
| }, |
There was a problem hiding this comment.
This makes me think that at one point we could consider having an MUI theme to Tailwind CSS theme converter like in https://reshaped.so/content/docs/getting-started/integrations/tailwind.
