mui / mui/material-ui

[docs-infra] Custom font styles breaks the custom tailwind config

Open
#38,467 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

scope: docs-infra
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

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

Originally posted by @mnajdova in https://github.com/mui/material-ui/issues/38464#issuecomment-1677115622

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The linked CodeSandbox's public/index.html at lines 1549-1575 is the concrete starting point; compare its sandbox, Create React App, and CDN Tailwind CSS setup with the working docs example. Done means custom fonts and custom Tailwind configuration both work in the sandbox demos, with any Vite or StackBlitz change assessed against that result.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, tailwindcss, vite
Domain
build-system, documentation, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.