chore(atomic): migrate to Tailwind V4

[fpbrault]

https://coveord.atlassian.net/browse/KIT-3925

[github-actions]

Pull Request Report

PR Title

✅ Title follows the conventional commit spec.

Live demo links

• Storybook

• Playwright report

Bundle Size

File	Old (kb)	New (kb)	Change (%)
case-assist	244	244	0
commerce	355.3	355.3	0
search	415.2	415.2	0
insight	406.4	406.4	0
recommendation	256.2	256.2	0
ssr	409	409	0
ssr-commerce	373	373	0

SSR Progress

Use case	SSR (#)	CSR (#)	Progress (%)
search	39	44	89
recommendation	0	4	0
case-assist	0	6	0
insight	0	27	0
commerce	0	15	0

Detailed logs

search : buildInteractiveResult
search : buildInteractiveInstantResult
search : buildInteractiveRecentResult
search : buildInteractiveCitation
search : buildGeneratedAnswer
recommendation : missing SSR support
case-assist : missing SSR support
insight : missing SSR support
commerce : missing SSR support

[fpbrault]

Replaced all simple mixins with custom utilities

[fpbrault]

Replaced any arbitrary values in classes when possible

[fpbrault]

Mixins that use one or two variables have been replaced with functional utilities

[fpbrault]

Since functional utilities can't have more than two variables (value/modifier), I had to replace the $(section-*) variables with their actual values. For now this will do but we can find a cleaner solution later if we want!

[dmgauthier]

I am curious what motivated this quite major lib update in the middle of a framework transition...

I would feel more secure with screen video captures of some interfaces.

[fpbrault]

I am curious what motivated this quite major lib update in the middle of a framework transition...

I would feel more secure with screen video captures of some interfaces.

@dmgauthier It is actually part of our move to Lit, as we want to already have everything in place as we convert the components to Lit, instead of a second phase of changes later just for the upgrade to tailwind 4

[louis-bompart]

I am curious what motivated this quite major lib update in the middle of a framework transition...

I would feel more secure with screen video captures of some interfaces.

That's an excellent question, and the concern is well-placed.

The timing of the migration is a key decision factor. If we were in the middle of migration (i.e., components had already been migrated or "touched" CSS), we would have postponed the migration.
However, we are not: indeed, no components have been migrated yet, so doing the Tailwind 4 upgrade now is positive if we manage to do it with limited code changes.

You are right that if we had migrated components, we would have doubled the risk, as we would have had to check the two stacks, which would have been burdensome, and we would probably not have taken this risk. However, right now essentially:

• We migrate Stencil TW stack (cool).
• We ensure Lit is built straight on TW4, no migration to do afterward, and we rip some benefits right now (@fpbrault there were a couple, could you give some example to justify why the move is beneficial)

[fpbrault]

I am curious what motivated this quite major lib update in the middle of a framework transition...
I would feel more secure with screen video captures of some interfaces.

That's an excellent question, and the concern is well-placed.

The timing of the migration is a key decision factor. If we were in the middle of migration (i.e., components had already been migrated or "touched" CSS), we would have postponed the migration. However, we are not: indeed, no components have been migrated yet, so doing the Tailwind 4 upgrade now is positive if we manage to do it with limited code changes.

You are right that if we had migrated components, we would have doubled the risk, as we would have had to check the two stacks, which would have been burdensome, and we would probably not have taken this risk. However, right now essentially:

• We migrate Stencil TW stack (cool).
• We ensure Lit is built straight on TW4, no migration to do afterward, and we rip some benefits right now (@fpbrault there were a couple, could you give some example to justify why the move is beneficial)

Ability to replace most of our component-specific stylesheets with just tailwind classes, with the new selectors.
Smaller bundle size.
Faster build.
No need for extra postcss plugins in our build process.
You can also check this page for what is new in V4: https://tailwindcss.com/blog/tailwindcss-v4

[dmgauthier]

@fpbrault @louis-bompart
Thanks you for taking the time to address my concerns. That being said as of now, as long as we are making sure this is not breaking any layout. 🚢

[louis-bompart]

@fpbrault @louis-bompart
Thanks you for taking the time to address my concerns. That being said as of now, as long as we are making sure this is not breaking any layout. 🚢

@fpbrault, that will probably warrant some QA steps. Try to target the areas where it's may fail and where we lack visibility