Skip to content

Compile Tailwind once so spacing utilities are not flattened in production - #2324

Merged
sanjay-kv merged 1 commit into
mainfrom
fix/tailwind-layer-order
Oct 20, 2026
Merged

sanjay-kv merged 1 commit into
mainfrom
fix/tailwind-layer-order

Conversation

@sanjay-kv

@sanjay-kv sanjay-kv commented Oct 20, 2026 •

Copy link
Copy Markdown
Member

Summary

  • Fixes cards and carousels losing their padding and gaps on the live site (for example the homepage Mentorship card and the blog carousel cards touching each other). Tailwind spacing utilities like p-6, pl-4 and mx-auto were being overridden by Tailwind's own base reset (* { padding: 0; margin: 0 }).
  • Cause: Tailwind was compiled in two files, src/css/custom.css and src/styles/globals.css, so the theme and base layers were emitted twice. The production CSS minifier dropped the earlier copies, leaving only the utilities layer first and the base reset after it. In CSS layers, later wins, so the reset beat the utilities. A dev server does not minify, so it hid the bug.
  • Fix: import Tailwind once, in custom.css, together with tw-animate-css and styles/globals.css (which no longer starts its own compile), and drop the separate globals.css import from the dashboard page.

Verification

  • Built with docusaurus build to a separate folder and checked the stylesheet: the layers now appear once and in the right order (properties, theme, base, components, utilities); the bundle is about 42 KB smaller; .p-6 is a plain utility again.
  • Side effect: dark: utilities now follow the site's theme toggle only (17 [data-theme=dark] rules, no OS prefers-color-scheme rules). Previously they also followed the operating system's dark setting.

Notes

  • Site-wide stylesheet change: please check the homepage (Mentorship card, blog carousel, testimonials), the dashboard tabs and dark mode on the deployed preview.
  • Not checked in a browser.

…ction

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@sanjay-kv
sanjay-kv requested a review from Adez017 as a code owner October 20, 2026 07:07
@vercel

vercel Bot commented Oct 20, 2026 •

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
recode-website Ready Ready Preview Oct 20, 2026 7:08am UTC

@github-actions

Copy link
Copy Markdown

Thank you for submitting your pull request! 🙌 We'll review it asap. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, if it's a Video -LEGEND, which helps speed up the review. If you have questions, reach out to LinkedIn. You can see in our Leaderboard in 20 min from now!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

  1. Get free Consultation after 5 PR: Mentorship for free.

  2. Get the Ebook for free after 10 PR: You can tag me in Discussion to get the same. Data Science cheatsheet for Beginners.

  3. Check out this weekly Newsletter: Sanjay's Newsletter.

Thanks again for your contribution! 😊

@github-actions github-actions Bot added in-review The current changes are in review and would need approval and testing before merging level 1 10 points recode this is label for leaderboard labels Oct 20, 2026
@github-actions github-actions Bot added this to the recode:launch 3.0 milestone Oct 20, 2026
@sanjay-kv
sanjay-kv merged commit b7c3ecf into main Oct 20, 2026
9 checks passed
@github-actions

Copy link
Copy Markdown

🎉 Your pull request has been successfully merged! 🎉 Thank you for your valuable contribution to our project.

I would be grateful if you can nominate for keeping this opensource project live and running Link to Nominate. Please do star the repo and Keep up the fantastic work! 🚀

This branch was successfully deployed

1 active deployment
Preview — 5135138a Deployed Oct 20, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

in-review The current changes are in review and would need approval and testing before merging level 1 10 points recode this is label for leaderboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant