feat (frontend): add tailwind, shadcn & fonts by rachael-101906 · Pull Request #53 · LSUTigerRacing/MemberPortal

rachael-101906 · 2025-10-04T18:25:13Z

Created tailwindcss configuration and added shadcn components such as a button and card

Updated README

DamienVesper

See below comments.
Try to run ESLint on the project before committing, to keep consistent style. Not a deal breaker, though, if you forget.

DamienVesper · 2025-10-04T19:21:34Z

frontend/package.json

    "@types/react": "^19.1.13",
    "@types/react-dom": "^19.1.9",
    "@vitejs/plugin-react": "^5.0.3",
+    "autoprefixer": "^10.4.21",


Tailwind doesn't need autoprefixer since v4.

If you are writing custom CSS and want autoprefixer to run on that, then you would have to remove @tailwindcss/vite, use @tailwindcss/postcss and add a postcss.config.js file. As it currently stands, postcss and autoprefixer do nothing.

DamienVesper · 2025-10-04T19:22:04Z

frontend/package.json

    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.4.0",
+    "postcss": "^8.5.6",


Because you do not need autoprefixer, and tailwind is used as a Vite plugin, you will not need this package either.

Got it, thank you!

had autoprefixer and postcss in the package.json file, but forgot that tailwind v4 doesn't need that since we also don't need the postcss and tailwind.config files anymore

DamienVesper

LGTM @liangricky7

liangricky7

Looks good, except just move your changes to App.tsx to a different file; I'll go in and make a react router in the next hour that can link to whichever page you want to have your test page on

I added the foundation for our custom fonts and colors in a new styles folder in the src folder, and tailored it to the design principles of the member portal in the index.css file.

liangricky7

take the styles folder out of assets; it should be its own folder
paste all of the content in App.tsx into some file in the pages folder since we need different content to be in App.tsx
in fonts.css, the Sora Font Family isn't properly imported; the font-family is "Manrope" for most, and the src is just not correct
We don't need static fonts if we have dynamic fonts; you can delete both static files

I added the input shadcn component and fixed the bugs from the previous pull request.

liangricky7

Are we going to use the dynamic fonts? if not, we can just delete them
If we are using static, for Sora, we only need the Regular and Bold, and for Manrope, Bold and ExtraBold

rachael-101906 · 2025-10-07T21:46:58Z

Are we going to use the dynamic fonts? if not, we can just delete them If we are using static, for Sora, we only need the Regular and Bold, and for Manrope, Bold and ExtraBold

I put them there just as options depending on design elements. We can delete them of course, but I just added them for possible integration. I only used Manrope Bold and SemiBold and Sora Regular on my own pages, but wasn't sure if we would decide differently on designs in the future.

…or typography I took the fonts I uploaded from Google and deleted the ones we primarily aren't going to use. I then redefined them in fonts.css with their corresponding weights based on the figma design(s) so then I could create their specific classes and variants. I lastly moved the specific styles for the fonts into a separate file called typography.css and imported it into index.css.

Changed oklch value to match color palette

DamienVesper

See comments.

DamienVesper · 2025-10-08T15:15:19Z

frontend/src/styles/fonts.css

-@font-face {
-  font-family: "Sora";
-  src: url("/src/assets/fonts/Sora/static/Sora-Medium.ttf");
+  font-weight: 600; 


Bold fonts should have a font weight of 700. If intending 600, use semibold.

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight#common_weight_name_mapping

Ricky told me to use 600 for all of the bold fonts.

DamienVesper · 2025-10-08T15:18:53Z

frontend/src/typography.css

Should configure this in @layer base instead of applying to h1, h2, h3 directly.
The utility classes (.h1, .h2, .h3) should use @utility.

https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles
https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities

DamienVesper · 2025-10-08T15:47:40Z

frontend/src/App.tsx

Bad merge from e943f77.

DamienVesper · 2025-10-08T15:49:27Z

frontend/src/assets/fonts/Sora/Sora-VariableFont_wght.ttf

Mutually exclusive with static fonts.

DamienVesper · 2025-10-08T15:49:48Z

frontend/src/assets/fonts/Manrope/Manrope-VariableFont_wght.ttf

Mutually exclusive with static fonts.

Deleted sora bold and re-added sora semibold to fit the desired 600 font weight

rachael-101906 added 2 commits October 4, 2025 11:29

Updated README

397a90f

Updated README

Had to install several components in order to have tailwind

d537b79

DamienVesper requested changes Oct 4, 2025

View reviewed changes

Fixed autoprefixer and postcss

f67c587

had autoprefixer and postcss in the package.json file, but forgot that tailwind v4 doesn't need that since we also don't need the postcss and tailwind.config files anymore

DamienVesper previously approved these changes Oct 5, 2025

View reviewed changes

liangricky7 requested changes Oct 5, 2025

View reviewed changes

Added Custom Fonts and Colors

56c0324

I added the foundation for our custom fonts and colors in a new styles folder in the src folder, and tailored it to the design principles of the member portal in the index.css file.

liangricky7 requested changes Oct 7, 2025

View reviewed changes

Fixed Bugs in Last PR & Shadcn Input Component

c5d9a46

I added the input shadcn component and fixed the bugs from the previous pull request.

liangricky7 requested changes Oct 7, 2025

View reviewed changes

Merge branch 'frontend' into member-management

e943f77

rachael-101906 dismissed DamienVesper’s stale review via e943f77 October 8, 2025 00:32

DamienVesper mentioned this pull request Oct 8, 2025

refactor (frontend): build lifecycle, lint #59

Merged

rachael-101906 added 2 commits October 8, 2025 07:37

Fixed color bug

0b4bfe7

Changed oklch value to match color palette

DamienVesper requested changes Oct 8, 2025

View reviewed changes

Fonts Change

a782f3c

Deleted sora bold and re-added sora semibold to fit the desired 600 font weight

liangricky7 merged commit 0f4abfd into frontend Oct 9, 2025

DamienVesper changed the title ~~Member management~~ feat (frontend): add tailwind, shadcn & fonts Nov 12, 2025

DamienVesper pushed a commit that referenced this pull request Nov 12, 2025

feat (frontend): add tailwind, shadcn & fonts (#53)

cb105f3

Conversation

rachael-101906 commented Oct 4, 2025

Uh oh!

DamienVesper left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DamienVesper left a comment

Choose a reason for hiding this comment

Uh oh!

liangricky7 left a comment

Choose a reason for hiding this comment

Uh oh!

liangricky7 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

liangricky7 left a comment

Choose a reason for hiding this comment

Uh oh!

rachael-101906 commented Oct 7, 2025

Uh oh!

DamienVesper left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

DamienVesper left a comment •

edited

Loading

liangricky7 left a comment •

edited

Loading