Skip to content

Conversation

@masenf
Copy link
Collaborator

@masenf masenf commented Jan 7, 2026

This fixes font rendering of pre elements when tailwind is not used.

This fixes font rendering of `pre` elements when tailwind is not used.
@codspeed-hq
Copy link

codspeed-hq bot commented Jan 7, 2026

CodSpeed Performance Report

Merging this PR will not alter performance

Comparing masenf/reflex-reset-no-theme (6cbac1b) with main (6718679)

Summary

✅ 8 untouched benchmarks

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Jan 7, 2026

Greptile Summary

Replaced Tailwind v4-specific --theme() function syntax with standard CSS custom property syntax in the style reset file. This ensures font declarations work correctly in projects that don't use Tailwind.

Key changes:

  • Converted font-family: --theme(--default-font-family, ...) to font-family: --default-font-family, ... for both sans-serif and monospace font stacks
  • Converted font-feature-settings and font-variation-settings declarations to use standard CSS fallback syntax
  • The change maintains the same functionality while ensuring CSS is valid without Tailwind's preprocessor

Confidence Score: 5/5

  • This PR is safe to merge with minimal risk
  • The change is a straightforward syntax conversion from Tailwind-specific CSS to standard CSS. The functionality remains identical - the same CSS custom properties and fallback values are used, just with proper standard syntax instead of Tailwind's --theme() wrapper. This fixes a real bug where fonts don't render correctly without Tailwind while maintaining compatibility with Tailwind projects.
  • No files require special attention

Important Files Changed

Filename Overview
reflex/.templates/web/styles/__reflex_style_reset.css Converted Tailwind-specific --theme() syntax to standard CSS custom property syntax for font declarations

Sequence Diagram

sequenceDiagram
    participant Browser
    participant CSS as __reflex_style_reset.css
    participant Tailwind as Tailwind Processor
    
    Note over Browser,Tailwind: Without this fix (old code)
    Browser->>CSS: Load stylesheet
    CSS->>Tailwind: Encounters --theme() syntax
    alt Tailwind enabled
        Tailwind->>CSS: Process --theme() → valid CSS
        CSS->>Browser: Render with correct fonts
    else Tailwind disabled
        CSS--xBrowser: Invalid CSS syntax
        Note over Browser: pre elements render incorrectly
    end
    
    Note over Browser,Tailwind: With this fix (new code)
    Browser->>CSS: Load stylesheet
    CSS->>Browser: Standard CSS custom properties
    Note over Browser: pre elements render correctly<br/>regardless of Tailwind
Loading

@adhami3310 adhami3310 merged commit 89f3a27 into main Jan 7, 2026
48 checks passed
@adhami3310 adhami3310 deleted the masenf/reflex-reset-no-theme branch January 7, 2026 18:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants