Updating Tailwind to V3

[justinconabree]

Description

• Updating Tailwind dependency to v3 (latest). Some required fixes documented here
• Fixing priority issues caused by Tailwind update. These were already described as B6 issues, but the update exacerbated the problem. The fix for this was using @apply when using composes from another class and overriding values.
  • Note styles may change from this as some styling isn't currently applied due to the B6 issue in current Venia (small bugs throughout the site previous to this change). In some cases I've removed the overrides so existing styles stay consistent.
• Changing tokens and index css files to use tailwind configurations
• Exposing key colors as css variables for use in legacy tokens
• Adding new values to theme config and replacing usage in css files
• Using new button and input border roundness for better configurability
• Changing media queries to tailwind variants
• Fixing many @TODO tailwind comments

Styles that have changed due to B6 being corrected

• Footer where the columns are spaced evenly
• Checkout form area when editing no longer has border

Original PR: #4082

Related Issue

Closes #4081

Acceptance

Verification Stakeholders

Specification

Changes to theme must be reviewed

Verification Steps

Test scenario(s) for direct fix/feature

Full pass through site to verify no major style changes across all screen sizes

Test scenario(s) for any Magento Backend Supported Configurations

None

Is Browser/Device testing needed?

Yes, device testing is required as styles may vary based through all breakpoints

Any ad-hoc/edge case scenarios that need to be considered?

All features (states) must be tested

Breaking Changes (if any)

Updating PWA Studio (Venia) from Tailwind V2 to V3 has required some changes.

For starters, developers should look over Tailwind's Upgrade Guide to see what the general implications of Tailwind V3 are for their project.

Some additional configurations have been made available in the theme and implemented in Venia. These include

• New border radiuses for component types
  • input, button, box, badge
• Border colors
  • input
  • swatch
  • base
  • current color (fix for TW3)
• Line heights attached to font size
• Additional media queries (max screen sizes, min/max height)
• Shimmer
  • Background color
  • Animation
• Spacing utils for screen widths and header spacing
• Width utils
• Screen sizes necessary to convert venia-ui to use Tailwind config in all instances (pagebuilder excluded)
  • Change xl screen size to 1024px (unused previous to this update)

Some key colors are also now exposed through CSS variables using the root plugin. These variables are then used in the base tokens file so legacy use now runs off of tailwind configuration.

Checklist

• [ ] I have added tests to cover my changes, if necessary.
• [ ] I have added translations for new strings, if necessary.
• I have updated the documentation accordingly, if necessary.

[pwa-studio-bot]

	Warnings
⚠️	Found the word "TODO" in the PR description. Just letting you know incase you forgot :)

	Messages
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next pr-test build run (assuming they are fixed).
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by 🚫 dangerJS against 812943a

[justinconabree]

@anthoula, @glo42707 no luck with the new PR unfortunately. Still the same issues. 😩
When you have a moment can you please give me more information on what commands are being run during the scaffolding/PR deployment process? I'll try to debug more on my end what's going on, but without that I'm not too sure to look.

Thanks!

[glo82145]

Hi @justinconabree
For scaffolding process, Please refer these two pages:- https://developer.adobe.com/commerce/pwa-studio/guides/packages/buildpack/scaffolding/ and https://developer.adobe.com/commerce/pwa-studio/tutorials/setup-storefront/

Please let us know for more information.

[justinconabree]

Hi @glo82145 ,

If you just run yarn create @magento/pwa it's not going to use local package versions, it's going to use already published versions. I need to know specifics about how it's used in this project, during deployment. Something is going wrong in either postcss or the tailwind JIT during the deployment's build to make it not recognize tailwind's @apply directives. This works fine locally with either yarn watch or yarn build, so I need more information and what is different during deployment VS running it locally.

(cc @anthoula @supernova-at)

[justinconabree]

@glo82145 This shouldn't have been merged until the issue with deployment was resolved. There's now uncompiled tailwind directives on develop

[glo82145]

Hi @justinconabree

Is it possible to connect today on teams or slack to discuss further?

[glo42707]

run pr-deploy

[pwa-test-bot]

Successfully started codebuild job for pr-deploy

[justinconabree]

Hi @glo82145 ,

Absolutely! I'm on the Magento Open Source slack if that helps

[justinconabree]

Hey @glo82145 , any update? I'm free today if you need

[justinconabree]

Hi @glo82145 @glo42707 ,
Following up again. Available as needed.
Thanks

[glo42707]

@justinconabree

we have tested changes of this PR in different cloud instances which is working fine.

now we will try pushing changes of this PR to master branch which is associated in github CICD, and hoping that it should resolved the issue of tailwind which we facing in PR link.

ideally all changes should reffelect in PR link byitself but UI distortion issue we are facing only on this PR-link.

also answering to your old querstion how CICD works, so for that we alredy have aws codebuild where we publish PWA-studio releases and manually we push PWA-DIST in all the associated instances of Module PWA.

we will keep you updated post we fininsh regression test of PWA-14.0.0

[justinconabree]

Hi @glo42707 ,

I'm not sure if this impacts your plans, but the issues are also present on https://develop.pwa-venia.com/ since the merge
Example, in the header there's supposed to be a gray bar between the store switcher and the currency. Right now it's not present as tailwind isn't compiling properly during CD for whatever reason. Anywhere there's an @apply should be actual CSS style.