Opt-in <TailwindPreflight />

[dsernst]

This is a followup to the original PR installing Tailwind: https://github.com/dsernst/siv/pull/122

---

This PR creates a component for the default tailwind reset file (called Preflight, aka @tailwind base).

Historically, this has been disabled on all of siv.org, because so much of the site was designed and coded pre-Tailwind. Without disabling the reset file, tons of things were unexpectedly changing throughout the whole site.

This new <TailwindPreflight /> component makes it so individual pages can opt-in to the preflight, closer to how Tailwind behaves by default.

All new pages going forward should add this <TailwindPreflight /> component.

• The new IntroPage.tsx was created as an example.
• Before merging this PR, we need to confirm it didn't accidentally screw up the other existing pages. Especially:
  • homepage
  • admin login
  • admin dashboard
  • vote page
  • vote status page
• One lingering concern is that this approach might not drop these global reset styles when client-side switching between pages? Untested.
• Link to this PR from tailwind.css comment and the new component file. Will be unblocked once this PR is created.

---

Post Merge Next Steps

Once this is merged, it will allow us to start taking pages one-by-one and configuring them to be compatible with Preflight.

That's not urgent, but once all pages are done, we can re-enable Preflight app wide, instead of page-by-page, to simplify things.

---

Development background, getting this to work

It took many hours, false starts with too many bugs, and rewrites to get this version that seemingly works pretty well. An earlier approach tries to conditionally require('tailwind-preflight.css') which itself imported @tailwind base. That mostly worked but caused a Flash of Unstructured Content on initial page load.

Although the old way of disabling, via tailwind.config.js preflight: false was and would continue to work, as part of the previous approaches, this PR removes that, and instead comments out the @tailwind base directive. This does the same thing, and is a bit simpler to follow (the preflight: false is unnecessarily magical). This new way also leaves a comment in tailwind.css, next to the commented out base, mentioning the new opt-in <TailwindPreflight /> component. Update: Went back to the old way because @tailwind base contains necessary default css variables like --tw-gradient-end-position.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
siv	✅ Ready (Inspect)	Visit Preview	Jun 17, 2024 5:35pm

[arianabuilds]

Broke the FAQ page & admin dashboard.
https://github.com/dsernst/siv/pull/149#issuecomment-2170601207

Fixed by https://github.com/dsernst/siv/pull/148/commits/ea318069ddaaf9cf75d844d06300143679d1ce26

[vercel]

@arianabuilds is attempting to deploy a commit to the SIV Team on Vercel.

To accomplish this, @arianabuilds needs to request access to the Team.

Afterwards, an owner of the Team is required to accept their membership request.

If you're already a member of the respective Vercel Team, make sure that your Personal Vercel Account is connected to your GitHub account.