null/Queue-North-Website
null
/
Queue-North-Website
1
0
Fork 0
Code Issues 27 Pull Requests Packages Projects Releases Wiki Activity

Bug: Multiple undefined Tailwind CSS classes across UI components and pages #51

New Issue
Closed
opened 2026-05-17 17:24:02 -05:00 by null · 0 comments
null commented 2026-05-17 17:24:02 -05:00
Owner
Copy Link

Problem

Multiple components and pages reference Tailwind classes that are not defined in tailwind.config.js. These classes generate no CSS and have no visual effect.

Undefined Classes Found

Design token classes (shadcn/ui conventions without CSS variable setup)

  • text-muted-foreground — used in Card.jsx, CardDescription.jsx, Dialog.jsx, Sheet.jsx, Input.jsx, Select.jsx, Textarea.jsx, Contact.jsx, Support.jsx
  • text-card-foreground — used in Card.jsx
  • text-accent-foreground — used in Button.jsx (outline variant)
  • text-secondary-foreground — used in Button.jsx (ghost variant)
  • bg-secondary — used in Button.jsx (ghost variant)
  • border-input — used in Input.jsx, Textarea.jsx
  • ring-ring — used in Button.jsx, Input.jsx, Textarea.jsx, Dialog.jsx, Sheet.jsx
  • ring-offset-background — used in Input.jsx, Textarea.jsx, Dialog.jsx, Sheet.jsx, Contact.jsx, Support.jsx
  • bg-accent — used in Button.jsx (outline variant)

Color shorthand classes

  • text-cyan — should be text-primary-cyan (used in MobileNav.jsx, Footer.jsx)
  • bg-cyan — should be bg-primary-cyan (used in Footer.jsx)
  • hover:bg-cyan/90 — should be hover:bg-primary-cyan/90 (Footer.jsx)
  • hover:text-cyan — should be hover:text-primary-cyan (Footer.jsx, MobileNav.jsx)

Fix

Either:

  1. Add the missing color definitions to tailwind.config.js (e.g., add muted-foreground, card-foreground, accent, accent-foreground, secondary, secondary-foreground, input, ring colors)
  2. Replace the undefined classes with the correct existing Tailwind config class names (e.g., text-muted-foreground → text-muted, text-cyan → text-primary-cyan)

Option 2 is preferred since the project uses direct hex values, not CSS variable-based theming.

Files Affected

  • src/components/ui/Button.jsx
  • src/components/ui/Card.jsx
  • src/components/ui/CardDescription.jsx
  • src/components/ui/Dialog.jsx
  • src/components/ui/Sheet.jsx
  • src/components/ui/Input.jsx
  • src/components/ui/Select.jsx
  • src/components/ui/Textarea.jsx
  • src/components/layout/MobileNav.jsx
  • src/components/layout/Footer.jsx
  • src/pages/Contact.jsx
  • src/pages/Support.jsx
## Problem Multiple components and pages reference Tailwind classes that are not defined in `tailwind.config.js`. These classes generate no CSS and have no visual effect. ## Undefined Classes Found ### Design token classes (shadcn/ui conventions without CSS variable setup) - `text-muted-foreground` — used in Card.jsx, CardDescription.jsx, Dialog.jsx, Sheet.jsx, Input.jsx, Select.jsx, Textarea.jsx, Contact.jsx, Support.jsx - `text-card-foreground` — used in Card.jsx - `text-accent-foreground` — used in Button.jsx (outline variant) - `text-secondary-foreground` — used in Button.jsx (ghost variant) - `bg-secondary` — used in Button.jsx (ghost variant) - `border-input` — used in Input.jsx, Textarea.jsx - `ring-ring` — used in Button.jsx, Input.jsx, Textarea.jsx, Dialog.jsx, Sheet.jsx - `ring-offset-background` — used in Input.jsx, Textarea.jsx, Dialog.jsx, Sheet.jsx, Contact.jsx, Support.jsx - `bg-accent` — used in Button.jsx (outline variant) ### Color shorthand classes - `text-cyan` — should be `text-primary-cyan` (used in MobileNav.jsx, Footer.jsx) - `bg-cyan` — should be `bg-primary-cyan` (used in Footer.jsx) - `hover:bg-cyan/90` — should be `hover:bg-primary-cyan/90` (Footer.jsx) - `hover:text-cyan` — should be `hover:text-primary-cyan` (Footer.jsx, MobileNav.jsx) ## Fix Either: 1. Add the missing color definitions to `tailwind.config.js` (e.g., add `muted-foreground`, `card-foreground`, `accent`, `accent-foreground`, `secondary`, `secondary-foreground`, `input`, `ring` colors) 2. Replace the undefined classes with the correct existing Tailwind config class names (e.g., `text-muted-foreground` → `text-muted`, `text-cyan` → `text-primary-cyan`) Option 2 is preferred since the project uses direct hex values, not CSS variable-based theming. ## Files Affected - `src/components/ui/Button.jsx` - `src/components/ui/Card.jsx` - `src/components/ui/CardDescription.jsx` - `src/components/ui/Dialog.jsx` - `src/components/ui/Sheet.jsx` - `src/components/ui/Input.jsx` - `src/components/ui/Select.jsx` - `src/components/ui/Textarea.jsx` - `src/components/layout/MobileNav.jsx` - `src/components/layout/Footer.jsx` - `src/pages/Contact.jsx` - `src/pages/Support.jsx`
null added the
P1 High
bug
frontend
 labels 2026-05-17 17:30:38 -05:00
null closed this issue 2026-05-17 17:42:09 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
dev
main
v0.8.0
v0.2.0
v0.1.1
v0.1.0
Labels
Clear labels   
P0 Critical

Critical — must fix before production. Data loss, security, or outage risk.

  
P1 High

High — should fix soon. Functional bugs, security hardening, data integrity.

  
P2 Medium

Medium — fix in next cycle. Quality of life, robustness, minor security.

  
P3 Low

Low — nice to have. Polish, optimization, minor UX.

  
accessibility

Accessibility issues

  
backend

Server-side code, API, database.

  
bug

Something is broken or behaves incorrectly.

  
content

   
data-integrity

Data consistency, constraints, validation.

  
enhancement

Feature or improvement request

  
frontend

Client-side code, UI components.

  
infra

Docker, deployment, CI/CD, infrastructure.

  
integration

   
owner

Direct feedback from the site owner. Top priority.

  
owner-input

   
performance

Performance or optimization.

  
performance

   
phase-7

   
phase-8

Phase 8 — Deferred enhancements (testimonials, blog, SEO, performance)

  
security

Security vulnerability or hardening.

  
seo

   
ui

UI/visual issues

  
ux

User experience issue.

No Label
P0 Critical
P1 High
P2 Medium
P3 Low
accessibility
backend
bug
content
data-integrity
enhancement
frontend
infra
integration
owner
owner-input
performance
performance
phase-7
phase-8
security
seo
ui
ux
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: null/Queue-North-Website#51
No description provided.
Delete Branch "%!s(<nil>)"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?