Skip to content
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

[WIP]: tailwind v4 #7507

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
+1,014 −811
Draft

[WIP]: tailwind v4 #7507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
120f3fa
initial migration done by tailwind cli
bjohansebas Feb 23, 2025
b705d73
refactor: move serveral part of config to index.css
bjohansebas Feb 23, 2025
da25611
run again tailwind update
bjohansebas Feb 23, 2025
47c2439
update common componnets imports
bjohansebas Feb 23, 2025
198a7d3
update container components imports
bjohansebas Feb 23, 2025
e3eb8a5
refactor: reorder CSS properties and update references to index.css
bjohansebas Mar 2, 2025
f27c932
refactor: update color variables and font variable names
bjohansebas Mar 3, 2025
e1cbbd9
chore: update tailwindcss to version 4.0.9
bjohansebas Mar 3, 2025
6966e08
refactor: remove tailwind.config.ts and migrate gradient utilities to…
bjohansebas Mar 3, 2025
e689a4d
refactor: migrate utilites to v4
bjohansebas Mar 3, 2025
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
5 changes: 1 addition & 4 deletions apps/site/.postcssrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
"postcss-mixins": {},
"postcss-simple-vars": {},
"postcss-calc": {},
"postcss-import": {},
"tailwindcss/nesting": {},
"tailwindcss": {},
"autoprefixer": {}
"@tailwindcss/postcss": {}
}
}
2 changes: 2 additions & 0 deletions apps/site/.stylelintrc.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,5 +43,7 @@ export default {
'import-notation': 'string',
// Allow the `@apply` at rule as its part of Tailwind
'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
'at-rule-no-deprecated': [true, { ignoreAtRules: ['apply'] }],
'at-rule-no-deprecated': [true, { ignoreAtRules: [CUSTOM_AT_RULES] }],

'at-rule-no-unknown': null,
Copy link
Member

Choose a reason for hiding this comment

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

We already have a rule with at-rule-unknown. Please remove this one.

'function-no-unknown': null,
Copy link
Member

Choose a reason for hiding this comment

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

Instead of disabling the rule, please provide the correct functions that should be allowlisted.

},
};
7 changes: 3 additions & 4 deletions apps/site/app/[locale]/next-data/og/[category]/[title]/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@ import HexagonGrid from '@/components/Icons/HexagonGrid';
import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
import { DEFAULT_CATEGORY_OG_TYPE } from '@/next.constants.mjs';
import { defaultLocale } from '@/next.locales.mjs';
import tailwindConfig from '@/tailwind.config';
import { hexToRGBA } from '@/util/hexToRGBA';

const CATEGORY_TO_THEME_COLOUR_MAP = {
announcement: tailwindConfig.theme.colors.green['700'],
release: tailwindConfig.theme.colors.info['600'],
vulnerability: tailwindConfig.theme.colors.warning['600'],
Comment on lines -11 to -13
Copy link
Author

Choose a reason for hiding this comment

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

I think I know how to make this work, I'll do it another day.

announcement: 'var(--color-green-900)',
release: 'var(--color-info-600)',
vulnerability: 'var(--color-warning-600)',
};

type Category = keyof typeof CATEGORY_TO_THEME_COLOUR_MAP;
Expand Down
25 changes: 7 additions & 18 deletions apps/site/components/Blog/BlogHeader/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,23 @@
@reference "../../../styles/index.css";

.blogHeader {
h1 {
@apply inline-flex
w-full
items-center
justify-between;
@apply inline-flex w-full items-center justify-between;
Copy link
Member

Choose a reason for hiding this comment

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

Please do not inline the styles.

Copy link
Author

Choose a reason for hiding this comment

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

Sorry, my auto formatter played a trick on me.

Copy link
Member

Choose a reason for hiding this comment

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

(For the whole file)


a {
@apply inline-flex
size-9
items-center
justify-center
rounded-md
p-2;
@apply inline-flex size-9 items-center justify-center rounded-md p-2;

&:hover {
@apply bg-neutral-100
dark:bg-neutral-900;
@apply bg-neutral-100 dark:bg-neutral-900;
}
}

svg {
@apply size-6
text-neutral-500;
@apply size-6 text-neutral-500;
}
}

p {
@apply text-lg
font-medium
text-neutral-800
dark:text-neutral-200;
@apply text-lg font-medium text-neutral-800 dark:text-neutral-200;
}
}
6 changes: 4 additions & 2 deletions apps/site/components/Common/AlertBox/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
@reference "../../../styles/index.css";

.alertBox {
@apply flex
flex-row
items-center
gap-2
rounded
rounded-sm
px-4
py-3
text-sm
Expand Down Expand Up @@ -31,7 +33,7 @@
}

.title {
@apply rounded-sm
@apply rounded-xs
Copy link
Member

Choose a reason for hiding this comment

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

Did the values change between xs and sm?

Copy link
Author

Choose a reason for hiding this comment

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

see https://tailwindcss.com/docs/upgrade-guide#renamed-utilities

px-1.5;
}

Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/Common/AvatarGroup/Avatar/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../../styles/index.css";
Copy link
Member

Choose a reason for hiding this comment

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

Why is this necessary? Can you point to docs?

Copy link
Author

Choose a reason for hiding this comment

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

see https://tailwindcss.com/docs/upgrade-guide#using-apply-with-vue-svelte-or-css-modules

Copy link
Member

Choose a reason for hiding this comment

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

I mean, can you write the reference of these like // @see ....


.item {
@apply xs:max-h-10
xs:max-w-10
Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/Common/AvatarGroup/Overlay/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../../styles/index.css";

.overlay {
@apply flex
min-w-56
Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/Common/AvatarGroup/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../styles/index.css";

.avatarGroup {
@apply flex
flex-wrap
Expand Down
4 changes: 3 additions & 1 deletion apps/site/components/Common/Badge/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
@reference "../../../styles/index.css";

.wrapper {
@apply flex
w-fit
items-center
rounded-full
border
py-1
pl-1
pr-2.5
pl-1
text-sm
font-medium;

Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/Common/Banner/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../styles/index.css";

.banner {
@apply flex
w-full
Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/Common/Blockquote/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../styles/index.css";

.wrapper {
@apply flex
max-w-2xl
Expand Down
6 changes: 4 additions & 2 deletions apps/site/components/Common/BlogPostCard/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
@reference "../../../styles/index.css";

.container {
@apply max-w-full
flex-1;
}

.subtitle {
@apply mb-2
mt-6
@apply mt-6
mb-2
inline-block
text-xs
font-semibold
Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/Common/Breadcrumbs/BreadcrumbHomeLink/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../../styles/index.css";

.icon {
@apply size-4;
}
2 changes: 2 additions & 0 deletions apps/site/components/Common/Breadcrumbs/BreadcrumbItem/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../../styles/index.css";

.item {
@apply flex
max-w-fit
Expand Down
4 changes: 3 additions & 1 deletion apps/site/components/Common/Breadcrumbs/BreadcrumbLink/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
@reference "../../../../styles/index.css";

.link {
@apply max-w-fit
truncate;

&.active {
@apply rounded
@apply rounded-sm
bg-green-600
px-2
py-1
Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/Common/Breadcrumbs/BreadcrumbRoot/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../../styles/index.css";

.list {
@apply xs:w-full
flex
Expand Down
20 changes: 11 additions & 9 deletions apps/site/components/Common/Button/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
@reference "../../../styles/index.css";

.button {
@apply px-4.5
relative
@apply relative
inline-flex
items-center
justify-center
gap-2
px-4.5
py-2.5
text-center
font-semibold
Expand All @@ -25,7 +27,7 @@
}

&.neutral {
@apply rounded
@apply rounded-sm
bg-neutral-900
text-white
dark:text-neutral-200;
Expand All @@ -45,12 +47,12 @@
}

&.primary {
@apply rounded
@apply rounded-sm
border
border-green-600
bg-green-600
text-white
shadow-sm;
shadow-xs;

&:hover:not([aria-disabled='true']) {
@apply border-green-700
Expand Down Expand Up @@ -100,14 +102,14 @@
border-green-600/30
bg-green-600/10
text-white
shadow-sm;
shadow-xs;

&::before {
@apply bg-gradient-glow-backdrop
absolute
left-0
right-0
top-0
right-0
left-0
-z-10
mx-auto
h-full
Expand All @@ -119,8 +121,8 @@
&::after {
@apply absolute
-top-px
left-0
right-0
left-0
mx-auto
h-px
w-2/5
Expand Down
10 changes: 6 additions & 4 deletions apps/site/components/Common/CodeBox/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@reference "../../../styles/index.css";

.root {
@apply w-full
rounded
rounded-sm
border
border-neutral-900
bg-neutral-950;
Expand Down Expand Up @@ -33,12 +35,12 @@
}

&:not(:empty:last-child)::after {
@apply w-4.5
font-ibm-plex-mono
@apply font-ibm-plex-mono
absolute
left-0
top-0
left-0
mr-4
w-4.5
text-right
text-neutral-600
[content:counter(line)]
Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/Common/CodeTabs/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../styles/index.css";

.root {
> [role='tabpanel'] > :first-child {
@apply rounded-t-none;
Expand Down
4 changes: 3 additions & 1 deletion apps/site/components/Common/CrossLink/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
@reference "../../../styles/index.css";

.crossLink {
@apply flex
flex-col
items-start
gap-2
truncate
rounded
rounded-sm
border
border-solid
border-neutral-300
Expand Down
4 changes: 3 additions & 1 deletion apps/site/components/Common/GlowingBackdrop/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
@reference "../../../styles/index.css";

.glowingBackdrop {
@apply absolute
left-0
top-0
left-0
-z-10
size-full
opacity-50
Expand Down
7 changes: 4 additions & 3 deletions apps/site/components/Common/LanguageDropDown/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../styles/index.css";

.languageDropdown {
@apply h-9
w-9
Expand All @@ -17,8 +19,7 @@
@apply max-h-80
w-48
overflow-hidden
rounded
border
rounded-sm border
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
rounded-sm border
rounded-sm
border

border-neutral-200
bg-white
shadow-lg
Expand All @@ -38,7 +39,7 @@
text-sm
font-medium
text-neutral-800
outline-none
outline-hidden
data-[highlighted]:bg-green-600
data-[highlighted]:text-white
dark:text-white;
Expand Down
4 changes: 3 additions & 1 deletion apps/site/components/Common/LinkTabs/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@reference "../../../styles/index.css";

.tabsList {
@apply font-open-sans
max-xs:hidden
mb-6
mt-10
mb-6
flex
gap-2
border-b
Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/Common/NodejsLogo/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../styles/index.css";

.nodejsLogo {
@apply h-6
w-20;
Expand Down
4 changes: 3 additions & 1 deletion apps/site/components/Common/Notification/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@reference "../../../styles/index.css";

.root {
@apply m-6
rounded
rounded-sm
border
border-neutral-200
bg-white
Expand Down
2 changes: 2 additions & 0 deletions apps/site/components/Common/Pagination/Ellipsis/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@reference "../../../../styles/index.css";

.ellipsis {
@apply w-10
px-3
Expand Down
10 changes: 6 additions & 4 deletions apps/site/components/Common/Pagination/PaginationListItem/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
@reference "../../../../styles/index.css";

.listItem,
.listItem:link,
.listItem:active {
@apply aria-current:bg-green-600
aria-current:text-white
flex
@apply flex
size-10
items-center
justify-center
rounded
rounded-sm
px-3
py-2.5
text-neutral-800
aria-current:bg-green-600
aria-current:text-white
motion-safe:transition-colors
dark:text-neutral-200;

Expand Down
Loading