Skip to content

Replace Tailwind v4 arbitrary values with canonical class names #1168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
corypride wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Replace Tailwind v4 arbitrary values with canonical class names #1168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
713773d
fix: removed operational insights page due to potential merge conflicts
corypride Jun 9, 2026
b485793
fix: removed changes to global.css
corypride Jun 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/knowledge-center/OpenContentItemAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export default function OpenContentItemAccordion({
<div
className={`transition-[max-height] duration-300 ${
activeKey === title
? 'overflow-visible max-h-[800px]'
? 'overflow-visible max-h-200'
: 'max-h-0 overflow-hidden'
}`}
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/schedule/SessionDetailSheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ export function SessionDetailSheet({
return (
<>
<Sheet open={!!session} onOpenChange={onClose}>
<SheetContent className="w-[400px] sm:w-[500px] p-0">
<SheetContent className="w-100 sm:w-125 p-0">
<SheetHeader className="sr-only">
<SheetTitle>Class Instance Details</SheetTitle>
<SheetDescription>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/student/ActivityHistoryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export default function ActivityHistoryCard({
<div className="flex items-center justify-between mb-6">
<h3 className="text-brand-dark">{heading}</h3>
<Select value={filterQuery} onValueChange={setFilterQuery}>
<SelectTrigger className="w-[160px]">
<SelectTrigger className="w-40">
<SelectValue placeholder="Filter" />
</SelectTrigger>
<SelectContent>
Expand Down Expand Up @@ -139,7 +139,7 @@ export default function ActivityHistoryCard({
key={`${String(item.created_at)}-${idx}`}
className="flex gap-3 text-sm"
>
<div className="text-gray-500 min-w-[100px] shrink-0">
<div className="text-gray-500 min-w-25 shrink-0">
{new Date(
item.created_at
).toLocaleDateString('en-US', {
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ui/command.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ function CommandList({
<CommandPrimitive.List
data-slot="command-list"
className={cn(
'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
'max-h-75 scroll-py-1 overflow-x-hidden overflow-y-auto',
className
)}
{...props}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ui/drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const DrawerContent = React.forwardRef<
)}
{...props}
>
<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
<div className="bg-muted mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
{children}
</DrawerPrimitive.Content>
</DrawerPortal>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ui/navigation-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ function NavigationMenuIndicator({
<NavigationMenuPrimitive.Indicator
data-slot="navigation-menu-indicator"
className={cn(
'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden',
className
)}
{...props}
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/pages/ClassesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ export default function ClassesPage() {

<div className="card-block p-4 mb-6">
<div className="flex gap-4 items-center flex-wrap">
<div className="flex-1 relative min-w-[300px]">
<div className="flex-1 relative min-w-75">
<Search className="input-icon-left size-5" />
<Input
placeholder="Search classes, programs, or instructors..."
Expand Down Expand Up @@ -313,7 +313,7 @@ export default function ClassesPage() {
value={facilityFilter}
onValueChange={setFacilityFilter}
>
<SelectTrigger className="w-[200px] overflow-hidden">
<SelectTrigger className="w-50 overflow-hidden">
<Filter className="size-4 mr-2 shrink-0" />
<SelectValue placeholder="All Facilities" />
</SelectTrigger>
Expand All @@ -336,7 +336,7 @@ export default function ClassesPage() {
value={programFilter}
onValueChange={setProgramFilter}
>
<SelectTrigger className="w-[220px]">
<SelectTrigger className="w-55">
<Filter className="size-4 mr-2" />
<SelectValue placeholder="All Programs" />
</SelectTrigger>
Expand All @@ -355,7 +355,7 @@ export default function ClassesPage() {
value={statusFilter}
onValueChange={setStatusFilter}
>
<SelectTrigger className="w-[180px]">
<SelectTrigger className="w-45">
<SelectValue placeholder="All Status" />
</SelectTrigger>
<SelectContent>
Expand Down Expand Up @@ -468,7 +468,7 @@ export default function ClassesPage() {
className="pl-10"
/>
</div>
<div className="max-h-[400px] overflow-y-auto space-y-2">
<div className="max-h-100 overflow-y-auto space-y-2">
{facilities
.filter(
(f) =>
Expand Down Expand Up @@ -556,7 +556,7 @@ export default function ClassesPage() {
className="pl-10"
/>
</div>
<div className="max-h-[400px] overflow-y-auto space-y-2">
<div className="max-h-100 overflow-y-auto space-y-2">
{!programsResp ? (
<p className="text-center text-gray-500 py-8">
Loading programs...
Expand Down Expand Up @@ -689,7 +689,7 @@ function ClassRow({
</div>
</td>
<td className="px-6 py-4">
<div className="w-[140px]">
<div className="w-35">
<div className="mb-1">
<span className="text-sm text-gray-700">
{cls.enrolled} / {cls.capacity}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/pages/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ function DeptAdminView({
<FacilityHealthTable rows={facilityRows} />
</div>
<div className="flex gap-6 flex-wrap lg:flex-nowrap">
<div className="flex-1 lg:flex-[2] min-w-[300px]">
<div className="flex-1 lg:flex-[2] min-w-75">
<MissingAttendanceWidget
items={missingAttendance}
isLoading={missingAttendanceLoading}
Expand Down Expand Up @@ -357,7 +357,7 @@ function TodaysSchedule({
}
className="flex items-center gap-4 flex-1 cursor-pointer min-w-0"
>
<div className="flex items-center gap-2 min-w-[80px] shrink-0">
<div className="flex items-center gap-2 min-w-20 shrink-0">
<Clock className="size-4 text-gray-500 dark:text-gray-400" />
<span className="text-sm text-brand-dark dark:text-white">
{formatTime12h(item.start_time)}
Expand All @@ -371,7 +371,7 @@ function TodaysSchedule({
{item.instructor_name}
</div>
</div>
<div className="text-sm text-gray-500 dark:text-gray-400 min-w-[160px] hidden md:block">
<div className="text-sm text-gray-500 dark:text-gray-400 min-w-40 hidden md:block">
{item.room || '-'}
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/pages/ProgramsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -441,7 +441,7 @@ export default function ProgramsPage() {
value={sort}
onValueChange={(v) => setSort(v as SortOption)}
>
<SelectTrigger className="w-[220px] focus-visible:border-gray-400 focus-visible:ring-gray-400/50 dark:!bg-[rgba(38,38,38,0.3)] cursor-default">
<SelectTrigger className="w-55 focus-visible:border-gray-400 focus-visible:ring-gray-400/50 dark:!bg-[rgba(38,38,38,0.3)] cursor-default">
<SelectValue placeholder="Sort By" />
</SelectTrigger>
<SelectContent>
Expand Down Expand Up @@ -480,7 +480,7 @@ export default function ProgramsPage() {
<ChevronDown className="size-4" />
</button>
</PopoverTrigger>
<PopoverContent className="w-[240px] p-4">
<PopoverContent className="w-60 p-4">
<div className="mb-3 font-medium text-sm">
Filter by Program Type
</div>
Expand Down Expand Up @@ -521,7 +521,7 @@ export default function ProgramsPage() {
<ChevronDown className="size-4" />
</button>
</PopoverTrigger>
<PopoverContent className="w-[240px] p-4">
<PopoverContent className="w-60 p-4">
<div className="mb-3 font-medium text-sm">
Filter by Status
</div>
Expand Down
10 changes: 3 additions & 7 deletions frontend/src/pages/admin/resident-profile/DetailedAttendanceDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,13 +138,9 @@ export function DetailedAttendanceDialog({
<Table className="table-fixed">
<TableHeader>
<TableRow>
<TableHead className="w-[120px]">
Date
</TableHead>
<TableHead className="w-[100px]">
Status
</TableHead>
<TableHead className="w-[120px]">
<TableHead className="w-30">Date</TableHead>
<TableHead className="w-25">Status</TableHead>
<TableHead className="w-30">
Marked By
</TableHead>
<TableHead>Notes</TableHead>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/auth/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ export default function Login() {
<div className="min-h-screen flex">
<div className="hidden lg:flex lg:w-[55%] flex-col justify-between bg-[#2C3622] text-white p-14 relative overflow-hidden">
<div
className="absolute top-0 left-0 w-[520px] h-[520px] rounded-full opacity-[0.07] -translate-x-1/3 -translate-y-1/3 pointer-events-none"
className="absolute top-0 left-0 w-130 h-130 rounded-full opacity-[0.07] -translate-x-1/3 -translate-y-1/3 pointer-events-none"

@coderabbitai coderabbitai Bot Jun 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

Does Tailwind CSS v4 default spacing scale include w-130, w-105, h-130, and h-105 as canonical preset classes, or are these still considered arbitrary values?

💡 Result:

In Tailwind CSS v4, classes such as w-105, w-130, h-105, and h-130 are not part of a predefined, "canonical" list of hardcoded preset classes [1][2]. Instead, Tailwind v4 utilizes a dynamic, generative system for spacing-based utilities [2][3]. In this system, utility classes like w-* and h-* are derived from a single --spacing theme variable (which defaults to 0.25rem or 4px) [2][3]. Because the engine calculates the values mathematically by multiplying this unit by the number provided in the class name, virtually any whole or decimal number can be used dynamically [2][3]. Consequently, while these classes will function as expected in your project, they are effectively "arbitrary" in the sense that they are generated on-demand by the compiler rather than being restricted to a fixed set of curated, canonical presets [2][3]. While the Tailwind CLI and IntelliSense may provide suggestions for a standard range (typically up to *-96) to encourage design consistency, using a value like w-130 is a valid, supported part of the v4 architecture and does not require square-bracket arbitrary value syntax [2][4][3].

Citations:

Clarify PR “canonical” wording for w-130/h-130/w-105/h-105
These classes are valid in Tailwind v4 without bracket arbitrary syntax because w-*/h-* utilities are generated dynamically, but they aren’t part of a fixed predefined “canonical preset” spacing list—so PR wording about IntelliSense suggesting canonical presets is misleading.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/auth/Login.tsx` at line 15, The PR wording around
"canonical preset" for w-130/h-130/w-105/h-105 is misleading; update the text in
the Login.tsx component where the className contains "w-130 h-130 ... w-105
h-105" to clarify that these utilities are dynamically generated in Tailwind v4
(not part of a fixed canonical spacing preset) and that IntelliSense suggestions
come from generated or configured utilities rather than a single canonical
preset—rephrase the comment/PR description to state this distinction and, if
helpful, point readers to their Tailwind config or IntelliSense docs for how
those utilities are produced.

style={{ backgroundColor: BRAND_GOLD }}
/>
<div
className="absolute bottom-0 right-0 w-[420px] h-[420px] rounded-full opacity-[0.07] translate-x-1/3 translate-y-1/3 pointer-events-none"
className="absolute bottom-0 right-0 w-105 h-105 rounded-full opacity-[0.07] translate-x-1/3 translate-y-1/3 pointer-events-none"
style={{ backgroundColor: BRAND_GOLD }}
/>

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/class-detail/AuditTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ export function AuditTab({ classId }: AuditTabProps) {
key={`${entry.created_at}-${entry.field_name}-${idx}`}
className="flex gap-3 text-sm"
>
<div className="text-gray-500 min-w-[100px] shrink-0">
<div className="text-gray-500 min-w-25 shrink-0">
{new Date(entry.created_at).toLocaleDateString(
'en-US',
{
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/class-detail/EditClassModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -430,7 +430,7 @@ export function EditClassModal({
onOpenChange={onOpenChange}
title="Edit Class"
description="Make changes to the class details."
className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto"
className="sm:max-w-150 max-h-[90vh] overflow-y-auto"
>
<div className="space-y-6">
<div className="space-y-4">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/class-detail/EnrollmentHistoryTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ export function EnrollmentHistoryTab({ classId }: EnrollmentHistoryTabProps) {
>
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-2">
<div className="flex items-start gap-3 sm:gap-6 flex-1">
<div className="w-[160px] shrink-0">
<div className="w-40 shrink-0">
<div className="text-brand-dark font-medium truncate">
{enrollment.doc_id}
</div>
Expand Down
9 changes: 6 additions & 3 deletions frontend/src/pages/class-detail/RosterTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,10 @@ export function RosterTab({
`/api/program-classes/${classId}/events?all=true`
);

const enrolledRows = enrollmentResp?.data ?? [];
const enrolledRows = useMemo(
() => enrollmentResp?.data ?? [],
[enrollmentResp]
);

const attendanceMap = useMemo(() => {
return computeAttendanceByUser(eventsResp?.data ?? []);
Expand Down Expand Up @@ -290,7 +293,7 @@ export function RosterTab({
aria-label={`Select ${enrollment.doc_id}`}
className="shrink-0"
/>
<div className="w-[140px] shrink-0">
<div className="w-35 shrink-0">
<div className="text-brand-dark font-medium">
{enrollment.doc_id}
</div>
Expand Down Expand Up @@ -421,7 +424,7 @@ export function RosterTab({
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="z-[100]"
className="z-100"
>
<DropdownMenuItem
onClick={() =>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/class-detail/ScheduleTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -346,7 +346,7 @@ export function ScheduleTab({ cls, onClassMutate }: ScheduleTabProps) {
</div>

<div className="overflow-x-auto">
<div className="min-w-[500px] border border-gray-200 rounded-lg overflow-hidden">
<div className="min-w-125 border border-gray-200 rounded-lg overflow-hidden">
<div className="grid grid-cols-7 bg-gray-50">
{DAY_HEADERS.map((d) => (
<div
Expand Down Expand Up @@ -386,7 +386,7 @@ export function ScheduleTab({ cls, onClassMutate }: ScheduleTabProps) {
handleDayClick(day);
}}
className={cn(
'min-h-[80px] p-2 border-t border-r border-gray-200 last:border-r-0 transition-all',
'min-h-20 p-2 border-t border-r border-gray-200 last:border-r-0 transition-all',
!day.isCurrentMonth &&
'bg-gray-50',
day.isToday && 'bg-blue-50',
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/class-detail/SupportTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export function SupportTab({ classId }: SupportTabProps) {
>
<div className="flex items-start justify-between">
<div className="flex items-start gap-6 flex-1">
<div className="w-[160px] shrink-0">
<div className="w-40 shrink-0">
<div className="text-brand-dark font-medium">
{flag.doc_id}
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/class-detail/TakeAttendanceModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ export function TakeAttendanceModal({
)}
</div>

<div className="max-h-[300px] overflow-y-auto space-y-2 pr-2">
<div className="max-h-75 overflow-y-auto space-y-2 pr-2">
{pastSessions.length === 0 ? (
<p className="text-center text-gray-500 py-6 text-sm">
No past sessions in the last 30 days.
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/class-detail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@ export default function ClassDetailPage() {
</DropdownMenuTrigger>
<DropdownMenuContent
align="end"
className="z-[100]"
className="z-100"
>
<Tooltip>
<TooltipTrigger asChild>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/event-attendance/AttendanceRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export function AttendanceRow({
<TableCell className="whitespace-nowrap">
{row.doc_id || '-'}
</TableCell>
<TableCell className="min-w-[200px]">
<TableCell className="min-w-50">
<div className="flex gap-1">
{TABLE_ATTENDANCE_STATUSES.map((opt) => (
<Button
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/event-attendance/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -514,7 +514,7 @@ function AttendanceRowCard({
return (
<div className="px-4 sm:px-6 py-5 hover:bg-surface-hover/30 transition-colors">
<div className="flex flex-col sm:flex-row sm:items-start gap-4">
<div className="min-w-[70px] sm:min-w-[100px] shrink-0">
<div className="min-w-[70px] sm:min-w-25 shrink-0">
<div className="text-brand-dark font-medium">
{row.doc_id}
</div>
Expand Down Expand Up @@ -674,7 +674,7 @@ function CollapsibleNoteField({
}
value={value}
onChange={(e) => onChange(e.target.value)}
className="min-h-[80px] text-sm"
className="min-h-20 text-sm"
/>
</div>
);
Expand Down
Loading
Loading