Skip to content

chore: update tailwind and related dependencies to latest versions #7984

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

Merged
alexander-akait merged 4 commits into from
Mar 12, 2026
Merged

chore: update tailwind and related dependencies to latest versions #7984

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
71efe78
chore: update tailwind and related dependencies to latest versions
TusharThakur04 Mar 11, 2026
437581c
chore: remove tailwindcss from ignore inside dependabot.yml
TusharThakur04 Mar 12, 2026
b4005b1
fix(styles): match broke <a> tag color inside .footer__top with produ…
TusharThakur04 Mar 12, 2026
b475841
remove ignore key
TusharThakur04 Mar 12, 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
1 change: 0 additions & 1 deletion .github/dependabot.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ updates:
- dependencies
versioning-strategy: widen
ignore:
- dependency-name: "tailwindcss"
Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 12, 2026

Choose a reason for hiding this comment

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

Remove ignore too, we don't have modules to ignore anymore

groups:
dependencies:
patterns:
Expand Down
7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,10 @@
"@octokit/rest": "^22.0.1",
"@pmmmwh/react-refresh-webpack-plugin": "^0.6.2",
"@svgr/webpack": "^8.1.0",
"@tailwindcss/postcss": "^4.2.1",
"@testing-library/dom": "^10.4.1",
"@testing-library/react": "^16.3.2",
"autoprefixer": "^10.4.24",
"autoprefixer": "^10.4.27",
"babel-loader": "^10.1.1",
"copy-webpack-plugin": "^14.0.0",
"css-loader": "^7.1.3",
Expand Down Expand Up @@ -132,7 +133,7 @@
"mkdirp": "^3.0.1",
"modularscale-sass": "^3.0.3",
"npm-run-all": "^4.1.1",
"postcss": "^8.5.6",
"postcss": "^8.5.8",
"postcss-loader": "^8.2.0",
"prettier": "^3.8.1",
"react-refresh": "^0.18.0",
Expand All @@ -152,7 +153,7 @@
"sitemap-static": "^0.4.2",
"static-site-generator-webpack-plugin": "^3.4.1",
"style-loader": "^4.0.0",
"tailwindcss": "^3.4.16",
"tailwindcss": "^4.2.1",
"tap-spot": "^1.1.2",
"unist-util-visit": "^5.1.0",
"webpack": "^5.105.0",
Expand Down
2 changes: 1 addition & 1 deletion postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
"use strict";

module.exports = {
plugins: [require("tailwindcss"), require("autoprefixer")],
plugins: ["@tailwindcss/postcss", "autoprefixer"],
};
3 changes: 3 additions & 0 deletions src/components/Dropdown/Dropdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
margin: 0;
padding: 0;
font-size: inherit;
display: flex;
align-items: center;
Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 11, 2026

Choose a reason for hiding this comment

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

Why we added this?

Copy link
Copy Markdown
Member Author

@TusharThakur04 TusharThakur04 Mar 11, 2026

Choose a reason for hiding this comment

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

#7984 (comment)

}
}

Expand All @@ -21,6 +23,7 @@
}

.dropdown__arrow {
line-height: 1;
Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 11, 2026

Choose a reason for hiding this comment

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

Why we added this?

Copy link
Copy Markdown
Member Author

@TusharThakur04 TusharThakur04 Mar 11, 2026

Choose a reason for hiding this comment

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

Screenshot from 2026-03-11 03-52-02
Screenshot from 2026-03-11 03-51-57

&:before {
content: "\25be";
}
Expand Down
7 changes: 7 additions & 0 deletions src/components/Footer/Footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use "../../styles/partials/vars" as *;
@use "sass:color";
@use "../../styles/partials/mixins" as *;
@use "../../styles/partials/functions" as *;

Expand Down Expand Up @@ -63,6 +65,7 @@

img {
width: auto;
display: inline-block;
height: 100%;
}
}
Expand Down Expand Up @@ -94,12 +97,16 @@

img {
width: auto;
display: inline-block;
Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 11, 2026

Choose a reason for hiding this comment

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

Why we added this?

Copy link
Copy Markdown
Member Author

@TusharThakur04 TusharThakur04 Mar 11, 2026

Choose a reason for hiding this comment

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

Screenshot from 2026-03-11 19-16-17

production:

Screenshot from 2026-03-11 21-41-46

height: 100%;
margin-left: 1rem;
}
}

.footer__top {
a {
color: $text-color-highlight;
}
max-width: 900px;
margin: 0 auto;
text-align: center;
Expand Down
1 change: 1 addition & 0 deletions src/components/Markdown/Markdown.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
ul,
ol {
padding-left: 30px;
list-style: revert;
Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 11, 2026

Choose a reason for hiding this comment

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

Why we added this?

Copy link
Copy Markdown
Member Author

@TusharThakur04 TusharThakur04 Mar 11, 2026

Choose a reason for hiding this comment

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

it wasn't showing the markers
Screenshot from 2026-03-11 19-02-46

production:

Screenshot from 2026-03-11 21-39-48


&:first-child {
margin-top: 0;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Navigation/Navigation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ function Navigation({ links, pathname, hash = "", toggleSidebar }) {
>
{link.children.map((child) => {
const classNames =
"text-blue-400 py-5 text-sm capitalize hover:text-black dark:hover:text-white";
"text-blue-400 dark:text-[#69a8ee] py-5 text-sm capitalize hover:text-black dark:hover:text-white";
Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 11, 2026

Choose a reason for hiding this comment

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

Why we added this?

const isActive = location.pathname.startsWith(child.url);
return (
<NavLink
Expand Down
2 changes: 1 addition & 1 deletion src/components/SplashViz/SplashViz.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import "./SplashViz.scss";
export default class SplashViz extends Component {
render() {
return (
<section className="splash-viz dark:bg-gray-900">
<section className="splash-viz dark:bg-gray-900!">
Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 11, 2026

Choose a reason for hiding this comment

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

Please describe all CSS changes to understand why it was changed, thanks

Copy link
Copy Markdown
Member Author

@TusharThakur04 TusharThakur04 Mar 11, 2026

Choose a reason for hiding this comment

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

In Tailwind v3, utilities were NOT wrapped in @layer but in Tailwind v4, all utilities are wrapped in @layer utilities , so after upgrade unlayered styles (Scss) held higher specificity than Tailwind utilities, which were fixed on th PR

Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 11, 2026

Choose a reason for hiding this comment

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

Got it 👍

<h1 className="splash-viz__heading">
<span> bundle your</span>
<TextRotator delay={5000} repeatDelay={5000} maxWidth={110}>
Expand Down
22 changes: 14 additions & 8 deletions src/styles/dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,21 +112,13 @@
.footer__inner {
border-color: #252525;
}
a,
button.as-link {
color: #69a8ee;
}
.page-links__gap {
color: #999;
}
.sidebar-item__toggle,
.sidebar-item--disabled .sidebar-item__toggle {
color: #69a8ee;
}
.sidebar-item__anchor a:hover,
a:hover {
color: #82b7f6;
}
.site {
background: #121212 !important;
}
Expand Down Expand Up @@ -174,3 +166,17 @@
color: white;
}
}

@layer base {
[data-theme="dark"] a,
[data-theme="dark"] button.as-link {
color: #69a8ee;
}
}

@layer base {
[data-theme="dark"] .sidebar-item__anchor a:hover,
[data-theme="dark"] a:hover {
color: #82b7f6;
}
}
49 changes: 25 additions & 24 deletions src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
@use "partials/vars" as *;
@use "partials/functions" as *;
@use "partials/mixins" as *;
@use "./reset";
@use "dark";

@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&family=Source+Sans+Pro:ital,wght@0,400;0,600;1,400&family=Source+Serif+Pro:wght@600&display=swap");
Expand Down Expand Up @@ -32,36 +31,38 @@ body {
[aria-hidden="true"]:hover .header-link {
visibility: visible;
}
a,
button.as-link {
color: $text-color-highlight;
text-decoration: none;
transition: color 250ms;
@layer base {
a,
button.as-link {
color: $text-color-highlight;
text-decoration: none;
transition: color 250ms;

&.icon-link {
display: inline-block;
font-size: 0.7em;
margin-left: 16px;
transform: rotate(-45deg);
&.icon-link {
display: inline-block;
font-size: 0.7em;
margin-left: 16px;
transform: rotate(-45deg);

color: color.adjust(getColor(dusty-grey), $lightness: 10%);
&:hover {
color: $text-color-highlight;
}
}

color: color.adjust(getColor(dusty-grey), $lightness: 10%);
&:hover {
color: $text-color-highlight;
color: color.adjust(getColor(denim), $lightness: -5%);
}
}

&:hover {
color: color.adjust(getColor(denim), $lightness: -5%);
::selection {
background: color.adjust(getColor(malibu), $alpha: -0.65);
}
}

::selection {
background: color.adjust(getColor(malibu), $alpha: -0.65);
}

.language-diff {
.token.prefix.inserted,
.token.prefix.deleted {
user-select: none;
.language-diff {
.token.prefix.inserted,
.token.prefix.deleted {
user-select: none;
}
}
}
45 changes: 37 additions & 8 deletions src/styles/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,52 @@
@import "tailwindcss/base";
/* @import "tailwindcss/components"; */
@import "tailwindcss/utilities";
@import "tailwindcss";
@layer base {
@import "../styles/reset.css";
}

@theme {
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--text-14: 14px;
--color-white: #fff;
--color-black: #000;
--color-transparent: transparent;
--color-blue-200: #8dd6f9;
--color-blue-400: #1d78c1;
--color-blue-600: #465e69;
--color-blue-800: #2b3a42;
--color-gray-100: #f2f2f2;
--color-gray-200: #dedede;
--color-gray-300: #999;
--color-gray-500: #666;
--color-gray-600: #535353;
--color-gray-700: #333;
--color-gray-800: #222;
--color-gray-900: #101619;
--spacing-5: 5px;
--spacing-10: 10px;
--spacing-20: 20px;
--grid-template-columns-contributors: repeat(auto-fit, 36px);
}

@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
@variant hover (&:hover);

/* doc search */
:root {
--docsearch-primary-color: #1d78c1 !important;
}
.DocSearch-Button {
@apply bg-transparent lg:bg-gray-500 transition duration-200 lg:rounded-full !important;
@apply bg-transparent! lg:bg-gray-500! transition! duration-200! lg:rounded-full!;
}
.DocSearch-Button-Placeholder {
@apply hidden lg:font-light lg:text-sm lg:block lg:text-gray-200 lg:dark:text-gray-300 transition duration-200 !important;
@apply hidden! lg:font-light! lg:text-sm! lg:block! lg:text-gray-200! lg:dark:text-gray-300! transition! duration-200!;
}
.DocSearch-Button:hover .DocSearch-Button-Placeholder {
@apply lg:text-gray-100 !important;
@apply lg:text-gray-100!;
}
.DocSearch-Button-Keys {
@apply hidden lg:flex !important;
@apply hidden! lg:flex!;
}
.DocSearch-Button .DocSearch-Search-Icon {
@apply text-white lg:text-gray-100 !important;
@apply text-white! lg:text-gray-100!;
}
7 changes: 1 addition & 6 deletions webpack.prod.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,7 @@ export default (env) =>
},
},
},
minimizer: [
"...",
new CssMinimizerPlugin({
minify: CssMinimizerPlugin.lightningCssMinify,
}),
],
Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 11, 2026

Choose a reason for hiding this comment

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

Why CssMinimizerPlugin.lightningCssMinify was removed?

Copy link
Copy Markdown
Member Author

@TusharThakur04 TusharThakur04 Mar 11, 2026

Choose a reason for hiding this comment

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

it doesn't support the new media query syntax in v4 @media (width >= 768px)
compared to earlier one - @media (min-width: 768px)
Build was failing because of this

Copy link
Copy Markdown
Member

@alexander-akait alexander-akait Mar 11, 2026

Choose a reason for hiding this comment

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

I think we need to update it or look at options, maybe we need to enable something here

minimizer: ["...", new CssMinimizerPlugin()],
},
plugins: [
new InjectManifest({
Expand Down
Loading
Loading