Skip to content

Commit 88a9fd8

Browse files
brunopacheco1brunopacheco1
authored
Merge pull request #592 from GenomicDataInfrastructure/migrate-tailwind
chore: bump tailwind up to v4
2 parents f930466 + b7b05f1 commit 88a9fd8

23 files changed

+707
-935
lines changed

‎package-lock.json‎

Lines changed: 608 additions & 838 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,12 +69,12 @@
6969
"utils": "^0.2.2"
7070
},
7171
"devDependencies": {
72+
"@tailwindcss/postcss": "^4.0.0",
7273
"@types/jest": "^29.5.14",
7374
"@types/node": "^22.10.2",
7475
"@types/react": "^19.0.2",
7576
"@types/react-dom": "^19.0.2",
7677
"@typescript-eslint/eslint-plugin": "^8.18.2",
77-
"autoprefixer": "^10.0.1",
7878
"dotenv": "^16.4.7",
7979
"eslint": "^9.17.0",
8080
"eslint-config-next": "^15.1.3",
@@ -83,8 +83,8 @@
8383
"openapi-zod-client": "^1.18.2",
8484
"postcss": "^8.4.49",
8585
"prettier": "^3.4.2",
86-
"prettier-plugin-tailwindcss": "^0.6.9",
87-
"tailwindcss": "3.4.17",
86+
"prettier-plugin-tailwindcss": "^0.6.11",
87+
"tailwindcss": "^4.0.0",
8888
"ts-jest": "^29.1.2",
8989
"typescript": "^5.7.2"
9090
}

‎postcss.config.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
// SPDX-License-Identifier: Apache-2.0
44
module.exports = {
55
plugins: {
6-
tailwindcss: {},
7-
autoprefixer: {},
6+
"@tailwindcss/postcss": {},
87
},
98
};

‎src/app/applications/[id]/FileUploaded.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ type FileUploadedProps = {
1717
function FileUploaded({ attachment, formId, fieldId }: FileUploadedProps) {
1818
const { application, isLoading, deleteAttachment } = useApplicationDetails();
1919
return (
20-
<div className="relative mt-5 flex items-center justify-between gap-x-1 break-all rounded border-2 bg-surface px-3 py-1.5 sm:gap-x-3">
20+
<div className="relative mt-5 flex items-center justify-between gap-x-1 break-all rounded-sm border-2 bg-surface px-3 py-1.5 sm:gap-x-3">
2121
<div className="flex items-center gap-x-2 sm:gap-x-4">
2222
<FontAwesomeIcon
2323
icon={faFileCircleCheck}

‎src/app/applications/[id]/GenericInputFormField.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ function GenericInputFormField({
7171
className={`h-12 w-full rounded-md border-2 border-primary px-4 text-md py-[9px] ${
7272
isDisabled
7373
? "border-slate-200 cursor-not-allowed opacity-50 bg-slate-50"
74-
: "border-primary focus:outline-none focus:ring-primary"
74+
: "border-primary focus:outline-hidden focus:ring-primary"
7575
}`}
7676
placeholder={placeholder}
7777
disabled={isDisabled}

‎src/app/applications/[id]/OptionFormField.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ function OptionFormField({
6565
className={`w-full mt-4 rounded-md border-2 px-4 py-[9px] text-md pr-10 text-left ${
6666
isDisabled
6767
? "border-slate-200 cursor-not-allowed bg-slate-50 opacity-50"
68-
: "border-primary focus:outline-none focus:ring-primary cursor-pointer"
68+
: "border-primary focus:outline-hidden focus:ring-primary cursor-pointer"
6969
}`}
7070
>
7171
{selectedOption

‎src/app/applications/[id]/TableFormField.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ function TableFormField({
113113
className={`w-full p-2 border-2 rounded-md ${
114114
isDisabled
115115
? "border-slate-200 cursor-not-allowed bg-slate-50 opacity-50"
116-
: "border-primary focus:outline-none focus:ring-primary"
116+
: "border-primary focus:outline-hidden focus:ring-primary"
117117
}`}
118118
/>
119119
</td>

‎src/app/applications/[id]/TextAreaFormField.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ function TextAreaFormField({
5757
className={`mt-4 w-full rounded-md border-2 border-primary px-4 py-[9px] text-md ${
5858
isDisabled
5959
? "border-slate-200 cursor-not-allowed opacity-50 bg-slate-50"
60-
: "border-primary focus:outline-none focus:ring-primary"
60+
: "border-primary focus:outline-hidden focus:ring-primary"
6161
}`}
6262
onChange={handleInputChange}
6363
disabled={isDisabled}

‎src/app/datasets/DatasetCard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function DatasetCard({
6363
toggleDatasetInBasket(e);
6464
}}
6565
disabled={buttonDisabled}
66-
className={`text-xs sm:text-base rounded-md px-4 py-2 font-bold transition-colors duration-200 tracking-wide cursor-pointer flex-shrink-0 ${buttonDisabled ? "opacity-60 cursor-not-allowed" : ""} ${isInBasket ? "bg-warning text-black hover:bg-secondary hover:text-white" : "bg-primary text-white hover:bg-secondary"}`}
66+
className={`text-xs sm:text-base rounded-md px-4 py-2 font-bold transition-colors duration-200 tracking-wide cursor-pointer shrink-0 ${buttonDisabled ? "opacity-60 cursor-not-allowed" : ""} ${isInBasket ? "bg-warning text-black hover:bg-secondary hover:text-white" : "bg-primary text-white hover:bg-secondary"}`}
6767
>
6868
<FontAwesomeIcon
6969
icon={isInBasket ? faMinusCircle : faPlusCircle}

‎src/app/globals.css‎

Lines changed: 70 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,85 @@
22

33
/* SPDX-License-Identifier: Apache-2.0 */
44

5-
@tailwind base;
6-
@tailwind components;
7-
@tailwind utilities;
8-
9-
.button {
10-
border: none;
11-
border-radius: 0.375rem;
12-
color: white;
13-
cursor: pointer;
14-
transition: background-color 0.2s;
15-
}
5+
@import "tailwindcss";
166

17-
.custom-button {
18-
font-size: 0.875rem;
19-
padding: 0.25rem 0.5rem;
20-
display: inline-flex;
21-
align-items: center;
22-
justify-content: center;
23-
max-width: max-content;
24-
}
7+
@source './**/*.{js,ts,jsx,tsx,mdx}';
8+
9+
@theme {
10+
--color-primary: var(--color-primary);
11+
--color-secondary: var(--color-secondary);
12+
--color-info: var(--color-info);
13+
--color-warning: var(--color-warning);
14+
--color-hover-color: var(--color-hover);
15+
--color-disclaimer: var(--color-disclaimer);
16+
--color-surface: var(--color-surface);
17+
18+
--background-image-gradient-radial: radial-gradient(var(--tw-gradient-stops));
19+
--background-image-gradient-conic: conic-gradient(
20+
from 180deg at 50% 50%,
21+
var(--tw-gradient-stops)
22+
);
2523

26-
.custom-button .button-icon {
27-
margin-right: 0.25rem;
24+
--font-subheading: var(--font-subheading), sans-serif;
25+
--font-title: var(--font-title), sans-serif;
26+
--font-body: var(--font-body), sans-serif;
2827
}
2928

30-
body {
31-
font-family: var(--font-body);
29+
/*
30+
The default border color has changed to `currentColor` in Tailwind CSS v4,
31+
so we've added these compatibility styles to make sure everything still
32+
looks the same as it did with Tailwind CSS v3.
33+
34+
If we ever want to remove these styles, we need to add an explicit border
35+
color utility to any element that depends on these defaults.
36+
*/
37+
@layer base {
38+
*,
39+
::after,
40+
::before,
41+
::backdrop,
42+
::file-selector-button {
43+
border-color: var(--color-gray-200, currentColor);
44+
}
3245
}
3346

34-
h1,
35-
h2,
36-
h3,
37-
h4,
38-
h5,
39-
h6 {
40-
@apply font-title;
47+
@utility text-balance {
48+
text-wrap: balance;
4149
}
4250

4351
@layer utilities {
44-
.text-balance {
45-
text-wrap: balance;
52+
.button {
53+
border: none;
54+
border-radius: 0.375rem;
55+
color: white;
56+
cursor: pointer;
57+
transition: background-color 0.2s;
58+
}
59+
60+
.custom-button {
61+
font-size: 0.875rem;
62+
padding: 0.25rem 0.5rem;
63+
display: inline-flex;
64+
align-items: center;
65+
justify-content: center;
66+
max-width: max-content;
67+
}
68+
69+
.custom-button .button-icon {
70+
margin-right: 0.25rem;
71+
}
72+
73+
body {
74+
font-family: var(--font-body);
75+
}
76+
77+
h1,
78+
h2,
79+
h3,
80+
h4,
81+
h5,
82+
h6 {
83+
@apply font-title;
4684
}
4785
}
4886

0 commit comments

Comments
 (0)