Skip to content

Commit dc485a5

Browse files
PurelyAnecdotalPurelyAnecdotal
authored
Update tailwind to v4 (#135)
1 parent c65428a commit dc485a5

File tree

18 files changed

+162
-113
lines changed

18 files changed

+162
-113
lines changed

‎bun.lock

Lines changed: 91 additions & 39 deletions
Large diffs are not rendered by default.

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@
1919
"@sveltejs/adapter-vercel": "^5.6.3",
2020
"@sveltejs/kit": "^2.17.2",
2121
"@sveltejs/vite-plugin-svelte": "^5.0.3",
22+
"@tailwindcss/vite": "^4.0.8",
2223
"@types/bun": "^1.2.3",
2324
"@vite-pwa/assets-generator": "^0.2.6",
24-
"autoprefixer": "^10.4.20",
2525
"eslint": "^9.21.0",
2626
"eslint-config-prettier": "^10.0.1",
2727
"eslint-plugin-svelte": "^2.46.1",
28-
"flowbite": "^2.5.2",
29-
"flowbite-svelte": "^0.47.4",
28+
"flowbite": "3.0.0",
29+
"flowbite-svelte": "^0.48.3",
3030
"flowbite-svelte-icons": "^2.0.2",
3131
"globals": "^16.0.0",
3232
"prettier": "^3.5.2",
@@ -35,7 +35,7 @@
3535
"prettier-plugin-tailwindcss": "^0.6.11",
3636
"svelte": "^5.20.2",
3737
"svelte-check": "^4.1.4",
38-
"tailwindcss": "^3.4.17",
38+
"tailwindcss": "^4.0.8",
3939
"typescript": "^5.7.3",
4040
"typescript-eslint": "^8.24.1",
4141
"vite": "^6.1.1"

‎postcss.config.js

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/app.css

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,41 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
2+
3+
@plugin 'flowbite/plugin';
4+
5+
@source '../node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}';
6+
7+
@custom-variant dark (&:is(.dark *));
8+
9+
@theme {
10+
--color-primary-50: #fff5f2;
11+
--color-primary-100: #fff1ee;
12+
--color-primary-200: #ffe4de;
13+
--color-primary-300: #ffd5cc;
14+
--color-primary-400: #ffbcad;
15+
--color-primary-500: #fe795d;
16+
--color-primary-600: #ef562f;
17+
--color-primary-700: #eb4f27;
18+
--color-primary-800: #cc4522;
19+
--color-primary-900: #a5371b;
20+
}
21+
22+
/*
23+
The default border color has changed to `currentColor` in Tailwind CSS v4,
24+
so we've added these compatibility styles to make sure everything still
25+
looks the same as it did with Tailwind CSS v3.
26+
27+
If we ever want to remove these styles, we need to add an explicit border
28+
color utility to any element that depends on these defaults.
29+
*/
30+
@layer base {
31+
*,
32+
::after,
33+
::before,
34+
::backdrop,
35+
::file-selector-button {
36+
border-color: var(--color-gray-200, currentColor);
37+
}
38+
}
439

540
html {
641
font-family: Inter, sans-serif;

‎src/lib/components/RefreshIndicator.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</script>
1313

1414
<div
15-
class="mx-auto my-2 flex w-fit items-center gap-1 rounded bg-gray-800 px-2 py-1 text-sm text-gray-400"
15+
class="mx-auto my-2 flex w-fit items-center gap-1 rounded-sm bg-gray-800 px-2 py-1 text-sm text-gray-400"
1616
>
1717
<ClockOutline size="sm" />
1818
Last updated {getRelativeTime(new Date(lastRefresh))}

‎src/routes/(authed)/AppSidebar.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
href="/grades"
7272
class="flex items-center rounded-lg bg-gray-200 p-2 text-base font-normal text-gray-900 hover:bg-gray-100 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-700"
7373
>
74-
<AddressBookOutline class="focus:outline-none" />
74+
<AddressBookOutline />
7575
<span class="ms-3">Grades</span>
7676
{#if page.params.index}
7777
<ChevronUpOutline />

‎src/routes/(authed)/feedback/+page.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@
1313
href="https://github.com/Nonexistent-Name/gradevue/issues"
1414
class="flex flex-row items-center gap-4"
1515
>
16-
<GithubSolid size="xl" class="text-white focus:outline-none" />
16+
<GithubSolid size="xl" class="text-white" />
1717
<h1 class="text-xl text-gray-900 dark:text-white">
1818
Report an issue or suggest a feature on GitHub
1919
</h1>
2020
</Card>
2121

2222
<Card href="mailto:hello@gradevue.org" class="flex flex-row items-center gap-4">
23-
<EnvelopeOutline size="xl" class="text-white focus:outline-none" />
23+
<EnvelopeOutline size="xl" class="text-white" />
2424
<h1 class="text-xl text-gray-900 dark:text-white">Send us an email</h1>
2525
</Card>
2626
</div>

‎src/routes/(authed)/grades/+page.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@
4848
{currentGradebookState.data.ReportingPeriod._GradePeriod}
4949

5050
{#if dropdownOpen}
51-
<ChevronUpOutline size="sm" class="ml-2 focus:outline-none" />
51+
<ChevronUpOutline size="sm" class="ml-2" />
5252
{:else}
53-
<ChevronDownOutline size="sm" class="ml-2 focus:outline-none" />
53+
<ChevronDownOutline size="sm" class="ml-2" />
5454
{/if}
5555
</Button>
5656

‎src/routes/(authed)/grades/[index]/+page.svelte

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -205,7 +205,7 @@
205205
</span>
206206
<span class="flex shrink-0 items-center text-2xl">
207207
{#if hypotheticalMode && !categories && !rawGradeCalcMatches}
208-
<ExclamationCircleSolid class="mr-2 focus:outline-none" />
208+
<ExclamationCircleSolid class="mr-2" />
209209
{/if}
210210
{#if value}
211211
<NumberFlow
@@ -291,7 +291,7 @@
291291

292292
{#if !rawGradeCalcMatches}
293293
<Alert class="m-4" color="red" border>
294-
<ExclamationCircleSolid slot="icon" size="sm" class="focus:outline-none" />
294+
<ExclamationCircleSolid slot="icon" size="sm" />
295295

296296
<div class="flex flex-col gap-2">
297297
<button
@@ -348,7 +348,7 @@
348348
<Checkbox bind:checked={hypotheticalMode}>
349349
<div id="hypothetical-toggle" class="mr-2 flex items-center">
350350
Hypothetical Mode
351-
<InfoCircleOutline size="sm" class="ml-2 focus:outline-none" />
351+
<InfoCircleOutline size="sm" class="ml-2" />
352352
</div>
353353
</Checkbox>
354354
<Popover triggeredBy="#hypothetical-toggle" class="max-w-md">
@@ -363,12 +363,12 @@
363363
{#if hypotheticalMode}
364364
<div transition:fade={{ duration: 200 }} class="ml-auto">
365365
<Button color="light" size="sm" onclick={initReactiveAssignments}>
366-
<CloseCircleOutline size="sm" class="mr-2 focus:outline-none" />
366+
<CloseCircleOutline size="sm" class="mr-2" />
367367
Reset
368368
</Button>
369369

370370
<Button color="light" size="sm" onclick={addHypotheticalAssignment}>
371-
<GridPlusOutline size="sm" class="mr-2 focus:outline-none" />
371+
<GridPlusOutline size="sm" class="mr-2" />
372372
Add Hypothetical Assignment
373373
</Button>
374374
</div>

‎src/routes/(authed)/grades/[index]/AssignmentCard.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
{#if categoryDropdownOptions.length > 0}
8888
<Button color="light">
8989
{category ?? 'Category'}
90-
<ChevronDownOutline size="xs" class="ml-2 focus:outline-none" />
90+
<ChevronDownOutline size="xs" class="ml-2" />
9191
</Button>
9292

9393
<Dropdown bind:open={categoryDropdownOpen}>
@@ -146,7 +146,7 @@
146146
toward your grade. GradeVue can reveal these assignments.
147147
</Popover>
148148
<Badge border color="dark" class="hidden-badge">
149-
Hidden Assignments <InfoCircleOutline size="xs" class="ml-1 focus:outline-none" />
149+
Hidden Assignments <InfoCircleOutline size="xs" class="ml-1" />
150150
</Badge>
151151
{/if}
152152
{#if showHypotheticalLabel}

0 commit comments

Comments
 (0)