Skip to content

Fixed the Tailwind spacing system - #110

Open
SahilGupta721 wants to merge 1 commit into
mainfrom
fix/tailwind-spacing-system-Sahil
Open

SahilGupta721 wants to merge 1 commit into
mainfrom
fix/tailwind-spacing-system-Sahil

Conversation

@SahilGupta721

Copy link
Copy Markdown

Related Issues (if applicable)

Closes #[no ticket number]

Description

Fixed the Tailwind spacing system, which was broken due to misconfigured tailwind.config.js and a manual <br/> spacing hack in HomePageIntro.tsx:

  • Removed container: false from corePlugins and properly configured theme.container (center: true, padding: '1rem') so Tailwind's container utility works instead of falling through to Infima's default container styling.
  • Fixed the sm breakpoint from 0px to 576px — the 0px value caused every sm: utility to fire at all screen widths (including desktop), overriding intended md:/lg: styles.
  • Removed the <br/><br/><br/><br/> spacing hack in HomePageIntro.tsx (redundant — the section already had md:mt-24 mt-16 for spacing).
  • Replaced the trailing <br/> before the "Read More" link with a proper mt-4 class on its wrapper div.

Type of Change

  • Bug fix
  • New feature
  • Documentation update
  • Content addition
  • Other (please specify)

Testing Done

Preview link: [add your preview/deploy link here]

  • Local build successful
  • Links verified
  • Images load correctly
  • Mobile responsive (verified skateboard/graphic sizing at mobile, sm (576px), and lg (997px) breakpoints)

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review
  • I have updated documentation if needed

Screenshots (if applicable)

None

Additional Notes

Root cause: tailwind.config.js had container: false and sm: '0px' set, which broke container centering/padding and caused mobile-only styles to leak onto desktop. This was blocking other layout work.

@membaye please review my PR

@netlify

netlify Bot commented Jul 24, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for electriumwebsite ready!

Name Link
🔨 Latest commit 1ddb17a
🔍 Latest deploy log https://app.netlify.com/projects/electriumwebsite/deploys/6a62be35c2a23b0008af535a
😎 Deploy Preview https://deploy-preview-110--electriumwebsite.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

This branch has not been deployed

No deployments
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.

1 participant