feat: migrate from tailwind v3 to v4 and UI enhancements

[nrjdalal]

• migrate from tailwind v3 to v4
• enhance usage area on mobile and desktop
• dropped shadows, used border and scale
• fixed broken text alignment and area usage in home cards
• fix: prettier and added tailwindcss sorting
• enabled non working pnpm run format/lint
• attached images for visual changes, beside that, just fixed alignment of docs, when there's no TOC things are not centered or small-width (visual transition has no layout shifts)
• preview: https://tanstack-com.vercel.app

[netlify]

‼️ Deploy request for tanstack rejected.

Name	Link
🔨 Latest commit	989227b

[nrjdalal]

This is my overall feedback on changes:

• Do not remove the drop shadows on the cards on the homepage. This is a quite a large visual change and I'd prefer it be pushed up separate to the other stylings changes. I'm asking for it to be separated out since it'd be best that the other have some input on whether it stylistically fits what's happening.
• Do not add the @ianvs/prettier-plugin-sort-imports package for sorting imports. The website doesn't need to be that opinionated.
• For TailwindCSS v4, please use the PostCSS method.

Overall, while the PR is workable, I think that it has just a bit too much happening in it. Please break it out into smaller chunks.

I'd recommend doing in separate chunks/PRs like.

• Tailwind v4 upgrade.
• Tailwindcss plugin addition. This would include the linting changes while the update to the styles. Optionally, you could introduce this in the tailwindcss v4 upgrade to save time.
• Website styling changes. Please list exactly what's changing (and where) for this.

• reduced footprint from 100 to 25%, removed import-sorting, add postcss
• attached images for visual changes, beside that, just fixed alignment of docs, when there's no TOC things are not centered or small-width (visual transition has no layout shifts), fixed width aligned right, there's not a lot to it

[KevinVandy]

There seems to be some extra spacing here:

[nrjdalal]

@KevinVandy 1920? what's your viewport?

[KevinVandy]

@KevinVandy 1920? what's your viewport?

Although, it may be the case that your tastack-com preview hasn't updated with any of the new commits?

[KevinVandy]

Looks like these headings got centered aligned somehow

[nrjdalal]

try now, what was really extra was the space, just left to the red part

if we mark the same spot here, it's is kinda intentional to keep docs centered to reader viewing area

preview faster here - https://tanstack-com.vercel.app

[nrjdalal]

@KevinVandy #422 (comment) should I align em' to left?

[KevinVandy]

@KevinVandy #422 (comment) should I align em' to left?

As @SeanCassiere said, I think this PR would ideally just upgrade to Tailwind v4 without large style differences. Fixing bugs or style inconsistencies along the way is fine, but it's easier to respect Tanner's original style choices, and then tweak those independently in subsequent proposals.

[nrjdalal]

when no TOC, the idea is to keep the transition alignment stable not breaking also

[nrjdalal]

@KevinVandy #422 (comment) should I align em' to left?

As @SeanCassiere said, I think this PR would ideally just upgrade to Tailwind v4 without large style differences. Fixing bugs or style inconsistencies along the way is fine, but it's easier to respect Tanner's original style choices, and then tweak those independently in subsequent proposals.

sure, no worries...

[nrjdalal]

@KevinVandy - on sidenote, won't be able to make anymore changes for now as I did ran prettier and made many changes before and after, migrating from v3 to v4 also broke so many things that had to be fixed...

keep the PR as draft, when I or somebody gets time to make em' changes, they can refer to this

[nrjdalal]

Caution

DO NOT MERGE.
This PR is for UI enhancements/migration-reference purpose only.

Repository - https://github.com/nrjdalal/tanstack.com/tree/revamp
Preview - https://tanstack-com.vercel.app

[KevinVandy]

@KevinVandy - on sidenote, won't be able to make anymore changes for now as I did ran prettier and made many changes before and after, migrating from v3 to v4 also broke so many things that had to be fixed...

Ok. This seemed close. Just want to make sure there's no unintentional regressions.

[nrjdalal]

not any that I've noticed so far

can make listed changes for sure, like a compiled and noticed list, but yeah

all of it works I guess, just a minor patch here and there is going to be required, but nothing is breaking as such

[SeanCassiere]

I'm closing this PR as requested by @nrjdalal.