Tailwind 4 Upgrade

[SerhiiTsybulskyi]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

Does this PR introduce a breaking change?

[x] Yes
[ ] No

Other information

• Initial upgrade (npx @tailwindcss/upgrade@next)
• Move color palette from TS to CSS
• Update postcss.config
• Get rid of tw-colors plugin and use CSS vars for theme tokens defining
• Add custom variants to support dark/light theme prefixes
• Migrate backgroundImage to CSS vars
• Move TW config from TS to CSS
• Update src/utils/Theme/config.ts to have the ability to use tokens inside the code base
• Update Theme Blocks
• Test components (compare with current version)
• Add upgrade guide on docs (website)

[netlify]

✅ Deploy Preview for reablocks-storybook ready!

Name	Link
🔨 Latest commit	6c86cd0
🔍 Latest deploy log	https://app.netlify.com/sites/reablocks-storybook/deploys/67b6dd929b1f910008ec54de
😎 Deploy Preview	https://deploy-preview-274--reablocks-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.