Skip to content

[CPS-2606] Migrate to Tailwind 4 #4898

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
javier-delgado merged 1 commit into from
Mar 30, 2026
Merged

[CPS-2606] Migrate to Tailwind 4 #4898

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
52 changes: 52 additions & 0 deletions .changeset/sharp-cases-cry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
---
'@toptal/picasso-rich-text-editor': major
'@toptal/picasso-input-adornment': major
'@toptal/picasso-account-select': major
'@toptal/picasso-outlined-input': major
'@toptal/picasso-overview-block': major
'@toptal/picasso-autocomplete': major
'@toptal/picasso-avatar-upload': major
'@toptal/picasso-notification': major
'@toptal/picasso-number-input': major
'@toptal/picasso-prompt-modal': major
'@toptal/picasso-tagselector': major
'@toptal/picasso-tailwind': major
'@toptal/picasso-date-picker': major
'@toptal/picasso-date-select': major
'@toptal/picasso-pagination': major
'@toptal/picasso-test-utils': major
'@toptal/picasso-timepicker': major
'@toptal/picasso-typography': major
'@toptal/picasso-accordion': major
'@toptal/picasso-file-input': major
'@toptal/base-tailwind': major
'@toptal/picasso-backdrop': major
'@toptal/picasso-calendar': major
'@toptal/picasso-dropdown': major
'@toptal/picasso-show-more': major
'@toptal/picasso-forms': major
'@toptal/picasso-helpbox': major
'@toptal/picasso-section': major
'@toptal/picasso-avatar': major
'@toptal/picasso-button': major
'@toptal/picasso-select': major
'@toptal/picasso-slider': major
'@toptal/picasso-alert': major
'@toptal/picasso-badge': major
'@toptal/picasso-input': major
'@toptal/picasso-modal': major
'@toptal/picasso-table': major
'@toptal/picasso-utils': major
'@toptal/picasso-form': major
'@toptal/picasso-link': major
'@toptal/picasso-menu': major
'@toptal/picasso-page': major
'@toptal/picasso-tabs': major
'@toptal/picasso-tag': major
---

Upgraded Tailwind CSS from v3 to v4:

- updated `tailwindcss` peer dependency from `^3.4.10` to `^4.2.1`
- updated deprecated utility classes
- min node version is 20 or higher
1 change: 1 addition & 0 deletions .nvmrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
20
5 changes: 1 addition & 4 deletions .storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,7 @@ module.exports = {
postcssOptions: {
config: false,
plugins: {
tailwindcss: {
config: require.resolve('../tailwind.config.js'),
},
autoprefixer: {},
'@tailwindcss/postcss': {},
},
},
},
Expand Down
7 changes: 4 additions & 3 deletions .storybook/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer theme, base, components;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css';
@config "../tailwind.config.js";
5 changes: 1 addition & 4 deletions cypress.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,7 @@ export default defineConfig({
postcssOptions: {
config: false,
plugins: {
tailwindcss: {
config: './tailwind.config.js',
},
autoprefixer: {},
'@tailwindcss/postcss': {},
},
},
},
Expand Down
7 changes: 4 additions & 3 deletions cypress/assets/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer theme, base, components;
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css';
@config "../../tailwind.config.js";
5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,8 @@
"react-test-renderer": "^19.2.0",
"remark-gfm": "^4.0.0",
"syncpack": "^13.0.2",
"tailwindcss": "^3.4.10",
"tailwindcss": "^4.2.1",
"@tailwindcss/postcss": "^4.2.1",
Comment thread
javier-delgado marked this conversation as resolved.
"thread-loader": "^4.0.2",
"ts-loader": "^9.5.1",
"ts-node": "^10.9.2",
Expand All @@ -205,7 +206,7 @@
"@nx/js": "21.5.1"
},
"engines": {
"node": ">=18"
"node": ">=20"
},
"files": [
"src"
Expand Down
4 changes: 2 additions & 2 deletions packages/base-tailwind/package.json
View file
Open in desktop
Comment thread
MrBra1nwash marked this conversation as resolved.
Comment thread
javier-delgado marked this conversation as resolved.
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@
"prepublishOnly": "yarn build:package"
},
"devDependencies": {
"tailwindcss": "^3.4.10"
"tailwindcss": "^4.2.1"
},
"peerDependencies": {
"tailwindcss": "^3.4.10"
"tailwindcss": "^4.2.1"
},
"sideEffects": false,
"files": [
Expand Down
8 changes: 7 additions & 1 deletion packages/base-tailwind/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {},
theme: {
extend: {
lineHeight: {
5: '1.25rem',
},
},
},
}
4 changes: 3 additions & 1 deletion packages/base/Accordion/src/Accordion/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,9 @@ export const Accordion = forwardRef<HTMLElement, Props>(function Accordion(
>
{children}
{expandIcon ? (
decorateWithExpandIconClasses(expandIcon, expandIconClass)
<ButtonAction
icon={decorateWithExpandIconClasses(expandIcon, expandIconClass)}
/>
Comment on lines +148 to +150
Copy link
Copy Markdown
Collaborator

@denieler denieler Mar 10, 2026

Choose a reason for hiding this comment

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

do we need a dedicated button here?

Copy link
Copy Markdown
Contributor Author

@javier-delgado javier-delgado Mar 10, 2026

Choose a reason for hiding this comment

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

Your other comment about an icon with the wrong tint in happo screenshots was caused by this. Basically this code was a bit incosistent, when an icon was provided it was used "as is" but when it was not, it was wrapped in a ButtonAction. I changed this so that both branches of the if use the ButtonAction wrapper

Copy link
Copy Markdown
Collaborator

@denieler denieler Mar 16, 2026

Choose a reason for hiding this comment

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

I'd suggest to leave it as it was before 🤔 and changing it in a separate PR if we want to

) : (
<div className={classes.expandIconAlignTop}>
<ButtonAction
Expand Down
25 changes: 19 additions & 6 deletions packages/base/Accordion/src/Accordion/__snapshots__/test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ exports[`Accordion renders collapsed by default 1`] = `
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
data-component-type="button"
role="button"
tabindex="0"
Expand Down Expand Up @@ -108,10 +108,23 @@ exports[`Accordion renders custom icon when passed 1`] = `
>
What is a dog?
</div>
<span
class="PicassoAccordion-expandIcon"
data-testid="custom-expand-icon"
/>
<button
Copy link
Copy Markdown
Collaborator

@denieler denieler Mar 16, 2026

Choose a reason for hiding this comment

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

do we need this change?

Copy link
Copy Markdown
Contributor Author

@javier-delgado javier-delgado Mar 17, 2026

Choose a reason for hiding this comment

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

Before this change, there was a happo diff on the accordion because the icon color was different in the new version. I noticed that this component treated the default icon and the prop icon in different ways: The default icon is wrapped in a Button but a prop icon is not. I thought it would be more consistent for the icon to always be wrapped. This results in a slight change in happo diff.

If you think it's not worth it, i can take it back, but we will have the color difference problem again

aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
data-component-type="button"
role="button"
tabindex="0"
type="button"
>
<span
class="items-center inline-flex font-semibold text-blue text-md"
>
<span
class="text-[1.2em] flex-1 w-4 h-4 text-graphite PicassoAccordion-expandIcon"
data-testid="custom-expand-icon"
/>
</span>
</button>
</div>
</div>
<div
Expand Down Expand Up @@ -175,7 +188,7 @@ exports[`Accordion renders disabled 1`] = `
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer border-none px-0 bg-transparent h-[1.5em] hover:text-blue hover:underline active:text-blue active:underline focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-visible:rounded-sm"
data-component-type="button"
role="button"
tabindex="0"
Expand Down
14 changes: 7 additions & 7 deletions packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ exports[`AccountSelect renders 1`] = `
class="Picasso-root"
>
<ul
class="relative list-none outline-none shadow-1 m-0 rounded-sm p-0"
class="relative list-none outline-hidden shadow-1 m-0 rounded-sm p-0"
role="menu"
tabindex="-1"
>
<li
aria-disabled="false"
class="text-black bg-transparent hover:bg-blue focus:bg-blue p-0 min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-auto [&+&]:border-t border-0 border-solid border-gray"
class="text-black bg-transparent hover:bg-blue focus:bg-blue p-0 min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-auto [&+&]:border-t border-0 border-solid border-gray"
role="menuitem"
tabindex="0"
>
Expand All @@ -26,7 +26,7 @@ exports[`AccountSelect renders 1`] = `
class="flex items-center"
>
<a
class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline !no-underline cursor-pointer flex-1"
class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline no-underline! cursor-pointer flex-1"
>
<div
class="p-6 items-center justify-between flex"
Expand Down Expand Up @@ -89,7 +89,7 @@ exports[`AccountSelect renders 1`] = `
</li>
<li
aria-disabled="false"
class="text-black bg-transparent hover:bg-blue focus:bg-blue p-0 min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-auto [&+&]:border-t border-0 border-solid border-gray"
class="text-black bg-transparent hover:bg-blue focus:bg-blue p-0 min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-auto [&+&]:border-t border-0 border-solid border-gray"
role="menuitem"
tabindex="-1"
>
Expand All @@ -103,7 +103,7 @@ exports[`AccountSelect renders 1`] = `
class="flex items-center"
>
<a
class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline !no-underline cursor-pointer flex-1"
class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline no-underline! cursor-pointer flex-1"
href="#"
>
<div
Expand Down Expand Up @@ -167,7 +167,7 @@ exports[`AccountSelect renders 1`] = `
</li>
<li
aria-disabled="false"
class="text-black bg-transparent hover:bg-blue focus:bg-blue p-0 min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-none appearance-none leading-4 h-auto [&+&]:border-t border-0 border-solid border-gray"
class="text-black bg-transparent hover:bg-blue focus:bg-blue p-0 min-w w-auto min-h sm:min-h md:min-h relative cursor-pointer transition-colors duration-150 ease-in overflow-hidden whitespace-normal text-left no-underline flex items-center justify-start outline-hidden appearance-none leading-4 h-auto [&+&]:border-t border-0 border-solid border-gray"
role="menuitem"
tabindex="-1"
>
Expand All @@ -181,7 +181,7 @@ exports[`AccountSelect renders 1`] = `
class="flex items-center"
>
<a
class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline !no-underline cursor-pointer flex-1"
class="m-0 font-inherit font-inherit focus:outline-hidden hover:underline leading-[inherit] text-blue visited:text-purple no-underline no-underline! cursor-pointer flex-1"
href="#"
>
<div
Expand Down
4 changes: 2 additions & 2 deletions packages/base/Alert/src/Alert/__snapshots__/test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ exports[`Alert renders 1`] = `
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-6 py-0 px-3"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border-none text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-6 py-0 px-3"
data-component-type="button"
data-testid="action-button"
role="button"
Expand All @@ -61,7 +61,7 @@ exports[`Alert renders 1`] = `
>
<button
aria-disabled="false"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-6 py-0 px-3"
class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-hidden [[data-component-type="button"]+&]:ml cursor-pointer no-underline hover:no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-6 py-0 px-3"
data-component-type="button"
data-testid="action-button"
role="button"
Expand Down
Loading
Loading