feat: tailwind 4 migration by FRSgit · Pull Request #3281 · vuestorefront/storefront-ui

FRSgit · 2025-07-06T21:23:33Z

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

* fix: changed paddings in sfselect * chore: adjusted padding left * chore: updated changelog * Update .changeset/fresh-emus-care.md Co-authored-by: Jakub Freisler <jakub@frsource.org> --------- Co-authored-by: Jakub Freisler <jakub@frsource.org>

* 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 · 2025-07-06T21:23:37Z

🦋 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 · 2025-07-28T15:03:13Z

looking forward to use it with tailwind v4

# 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

patch sf-docs-base to handle new tailwind

Szymon-dziewonski

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

apps/docs/components/package.json

apps/preview/nuxt/nuxt.config.ts

package.json

packages/config/tailwind/config.css

apps/docs/components/nuxt.config.ts

packages/config/tailwind/config.css

…refront/storefront-ui into feat/tailwind-4-migration

azuken · 2025-12-05T15:48:09Z

Hi @FRSgit !
Is there any migration documentation in progress for this new version ? Can't wait to use it with Tailwind 4 ! I saw that I can already implement it, but I don't know what to do (migrate with Tailwind doc, then fix potential breaking changes ?)

aniamusial and others added 6 commits June 29, 2023 10:56

fix: breaking change - sfbutton padding size (#2815) (#2829)

33935c6

fix!: remove flex classes from SfListItem (#2902)

bbec9e1

* BREAKING CHANGE: remove flex classes form wrapper slot in list item * fix: lint fixes * fix: lint fixes

chore!: remove deprecated useTrapFocus arrowKeysOn option [SFUI2-1273] (

727a192

#3008) BREAKING CHANGE: remove deprecated useTrapFocus arrowKeysOn option

chore: update configs

e610abf

chore: migrate all components

9687eb4

FRSgit mentioned this pull request Aug 1, 2025

Does store front support Tailwind 4? #3278

Closed

1 task

FRSgit and others added 7 commits September 3, 2025 23:56

Merge branch 'v2-develop' into v2-release/3.0.0

10f4399

feat: add tailwind-merge for tailwind classes (#3298)

c6e4ddd

chore: migrate taiwlind classes post merge

6c23165

chore: migrate tailwind configuration for preview apps

a325b57

chore: lint autofix

97180bf

FRSgit marked this pull request as ready for review October 9, 2025 16:34

FRSgit requested review from Szymon-dziewonski and filrak as code owners October 9, 2025 16:34

FRSgit added 6 commits October 10, 2025 03:35

fix: vue-tsc & typescript 5.7+ incompatibility

2e67464

chore/; migrate additional apps

4aff1ae

chore: add dark mode

cbc6b62

chore: migrate docs to tailwind 4

110c0b5

patch sf-docs-base to handle new tailwind

fix: E2E tests

4def7c7

chore: lint autofix

9e1b239

FRSgit force-pushed the feat/tailwind-4-migration branch 2 times, most recently from 215ac83 to 89effc8 Compare October 23, 2025 11:02

fix: docs build

d9f00e7

FRSgit force-pushed the feat/tailwind-4-migration branch from 89effc8 to d9f00e7 Compare October 23, 2025 11:11

Szymon-dziewonski reviewed Oct 24, 2025

View reviewed changes

apps/docs/components/package.json Show resolved Hide resolved

apps/preview/nuxt/nuxt.config.ts Show resolved Hide resolved

package.json Show resolved Hide resolved

packages/config/tailwind/config.css Show resolved Hide resolved

Szymon-dziewonski approved these changes Oct 24, 2025

View reviewed changes

FRSgit force-pushed the feat/tailwind-4-migration branch from ddd2abc to beda435 Compare October 27, 2025 15:38

fix: docs

6f28f8e

FRSgit force-pushed the feat/tailwind-4-migration branch from beda435 to 6f28f8e Compare October 27, 2025 15:40

fix: prose paragraph styling

3f5c1a5

Szymon-dziewonski reviewed Oct 29, 2025

View reviewed changes

apps/docs/components/nuxt.config.ts Show resolved Hide resolved

Szymon-dziewonski reviewed Oct 29, 2025

View reviewed changes

packages/config/tailwind/config.css Show resolved Hide resolved

Szymon-dziewonski and others added 6 commits October 29, 2025 15:31

chore: UI fixes

00f5cb8

chore: add comment about color conversion

b30cbc9

Merge branch 'feat/tailwind-4-migration' of https://github.com/vuesto…

3a3097a

…refront/storefront-ui into feat/tailwind-4-migration

chore: update vite installation guide

d37cb69

chore: add info about nuxtjs/tailwindcss usage with tailwind 4

0c79a98

chore: add comment about hover variant

258f8b2

FRSgit merged commit 15e4549 into v2-develop Oct 30, 2025
14 checks passed

FRSgit deleted the feat/tailwind-4-migration branch October 30, 2025 09:02

github-actions bot mentioned this pull request Oct 3, 2025

ci: version packages v3.0.0 #2886

Merged

github-actions bot mentioned this pull request Nov 17, 2025

ci: version packages v4.0.0 #3319

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: tailwind 4 migration#3281

feat: tailwind 4 migration#3281
FRSgit merged 28 commits intov2-developfrom
feat/tailwind-4-migration

FRSgit commented Jul 6, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Jul 6, 2025 •

edited

Loading

Uh oh!

maksym-arturIn commented Jul 28, 2025

Uh oh!

Szymon-dziewonski left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

azuken commented Dec 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

FRSgit commented Jul 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related issue

Scope of work

Screenshots of visual changes

Checklist

Uh oh!

changeset-bot bot commented Jul 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

maksym-arturIn commented Jul 28, 2025

Uh oh!

Szymon-dziewonski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

azuken commented Dec 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

FRSgit commented Jul 6, 2025 •

edited

Loading

changeset-bot bot commented Jul 6, 2025 •

edited

Loading