Skip to content

Conversation

@FRSgit
Copy link
Contributor

@FRSgit FRSgit commented Jul 6, 2025

Related issue

Closes #

Scope of work

https://tailwindcss.com/docs/upgrade-guide

To avoid some of the breaking changes introduced by Tailwind 4 and to keep sensible defaults we want to give to out users, SFUI Tailwind configuration:

  • brings back the possibility to set the default outline width, color and offset (see the discussion here). I think it might be good to add those back for all affected utilities (borders/rings/divides).
  • adds the cursor: pointer style for button elements.
  • reimplements automated dark mode that will support both media AND classname mode.

Screenshots of visual changes

Checklist

  • Self code-reviewed
  • Changes documented
  • Semantic HTML
  • SSR-friendly
  • Caching friendly
  • a11y for WCAG 2.0 AA
  • examples created
  • blocks created
  • cypress tests created

aniamusial and others added 6 commits June 29, 2023 10:56
* fix: changed paddings in sfselect

* chore: adjusted padding left

* chore: updated changelog

* Update .changeset/fresh-emus-care.md

Co-authored-by: Jakub Freisler <[email protected]>

---------

Co-authored-by: Jakub Freisler <[email protected]>
* BREAKING CHANGE: remove flex classes form wrapper slot in list item

* fix: lint fixes

* fix: lint fixes
#3008)

BREAKING CHANGE: remove deprecated useTrapFocus arrowKeysOn option
@changeset-bot
Copy link

changeset-bot bot commented Jul 6, 2025

🦋 Changeset detected

Latest commit: 258f8b2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@storefront-ui/react Major
@storefront-ui/vue Major
@storefront-ui/nuxt Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@maksym-arturIn
Copy link

looking forward to use it with tailwind v4

FRSgit and others added 7 commits September 3, 2025 23:56
# Conflicts:
#	apps/docs/components/content/_hooks/useTrapFocus.md
#	packages/sfui/frameworks/react/components/SfListItem/SfListItem.tsx
#	packages/sfui/frameworks/vue/components/SfListItem/SfListItem.vue
#	packages/sfui/frameworks/vue/composables/useTrapFocus/useTrapFocus.ts
#	packages/tests/components/SfButton/SfButton.cy.tsx
# Conflicts:
#	apps/docs/components/components/content/ColorPaletteBlock.vue
#	apps/preview/next/package.json
#	apps/preview/next/pages/examples/SfAccordionItem.tsx
#	apps/preview/next/pages/showcases/ProductCard/Details.tsx
#	apps/preview/next/pages/showcases/ProductCard/ProductCardHorizontal.tsx
#	apps/preview/next/pages/showcases/QuantitySelector/OutOfStock.tsx
#	apps/preview/next/pages/showcases/QuantitySelector/QuantitySelector.tsx
#	apps/preview/next/pages/showcases/QuantitySelector/Rounded.tsx
#	apps/preview/nuxt/pages/examples/SfAccordionItem.vue
#	apps/test/react/package.json
#	apps/test/vue/package.json
#	package.json
#	packages/config/tailwind/index.ts
#	packages/config/tailwind/package.json
#	packages/sfui/frameworks/react/components/SfButton/SfButton.tsx
#	packages/sfui/frameworks/react/components/SfCheckbox/SfCheckbox.tsx
#	packages/sfui/frameworks/react/components/SfChip/SfChip.tsx
#	packages/sfui/frameworks/react/components/SfInput/SfInput.tsx
#	packages/sfui/frameworks/react/components/SfLink/SfLink.tsx
#	packages/sfui/frameworks/react/components/SfModal/SfModal.tsx
#	packages/sfui/frameworks/react/components/SfSelect/SfSelect.tsx
#	packages/sfui/frameworks/react/components/SfTextarea/SfTextarea.tsx
#	packages/sfui/frameworks/vue/components/SfAccordionItem/SfAccordionItem.vue
#	packages/sfui/frameworks/vue/components/SfButton/SfButton.vue
#	packages/sfui/frameworks/vue/components/SfCheckbox/SfCheckbox.vue
#	packages/sfui/frameworks/vue/components/SfChip/SfChip.vue
#	packages/sfui/frameworks/vue/components/SfInput/SfInput.vue
#	packages/sfui/frameworks/vue/components/SfLink/SfLink.vue
#	packages/sfui/frameworks/vue/components/SfModal/SfModal.vue
#	packages/sfui/frameworks/vue/components/SfSelect/SfSelect.vue
#	packages/sfui/frameworks/vue/components/SfTextarea/SfTextarea.vue
#	yarn.lock
@FRSgit FRSgit marked this pull request as ready for review October 9, 2025 16:34
@FRSgit FRSgit force-pushed the feat/tailwind-4-migration branch 2 times, most recently from 215ac83 to 89effc8 Compare October 23, 2025 11:02
@FRSgit FRSgit force-pushed the feat/tailwind-4-migration branch from 89effc8 to d9f00e7 Compare October 23, 2025 11:11
Copy link
Contributor

@Szymon-dziewonski Szymon-dziewonski left a comment

Choose a reason for hiding this comment

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

Titanic work, great PR!
I approved in advance, and leave only couple of questions !

"@nuxtjs/color-mode": "^3.4.2",
"@nuxtjs/seo": "^2.0.0-rc.10",
"@nuxtjs/tailwindcss": "^6.12.1",
"@nuxtjs/tailwindcss": "7.0.0-beta.1",
Copy link
Contributor

Choose a reason for hiding this comment

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

beta :(

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's the only version that works with tailwind 4. Do you think that some info about this fact should be added in the docs?

Copy link
Contributor

Choose a reason for hiding this comment

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

not sure really tbh

@FRSgit FRSgit force-pushed the feat/tailwind-4-migration branch from ddd2abc to beda435 Compare October 27, 2025 15:38
@FRSgit FRSgit force-pushed the feat/tailwind-4-migration branch from beda435 to 6f28f8e Compare October 27, 2025 15:40
@FRSgit FRSgit merged commit 15e4549 into v2-develop Oct 30, 2025
14 checks passed
@FRSgit FRSgit deleted the feat/tailwind-4-migration branch October 30, 2025 09:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants