feat(styled kit): tailwind v4 update (#1122)

* chore: migration script

* fix: tailwind 4 @source

* fix: global css using @source

* chore: transition theme

* chore: transform hsl() to oklch(from var(...) l c h)

* fix: collapsible and accordion animations

* fix: modal is no longer centered by default

* docs: headless modal margins

* fix: border-width and stroke-width theme css variables

* fix: shadows and press animations

* docs: update modal code

* chore: copy global.css for cli

* refactor: cli install tailwind 4

* chore: copy-css-config base global.css config appended

* fix: qwik-ui, popover-polyfill layers order

* refactor: add base @layer and @import to extract-theme

* chore: remove tailwind.config.cjs cli handling

* fix: cli tests config

* fix: component-tests

* test: extract-theme-css

* fix: CI cli-e2e

* fix: shadows

* chore: format all

* chore: update components mdx

* chore: reset action.yml

* chore: remove tailwind.extend_template

* test: update setup-tailwind-generator.spec

* chore: fix extract-theme-css shadows extraction

* chore: fix simple and brutalist shadows

* fix: extract-theme storke width

* update: styled install docs

* chore: update extract-theme.css base theme

* chore: update styled install

* fix: CI utils snapshots

* chore: prettierrc tailwindStylesheet

* fix: extract-theme-css extra curly brace

* fix: let the cli install tw-animate-css instead of tailwindcss-animate

* docs: update install deps

* test: cli update snapshots

* test: utils:test update snapshots

* chore: changesets

* fix: cli package.json utils version

* docs: add migration guide

* docs: add legacy page

* docs: non breaking note

* fix: carousel start slide width

Author: maiieul

.changeset/fair-hoops-taste.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: the accordion `offsetHeight` is now properly calculated with tailwind v4.

.changeset/mean-books-act.md

@@ -0,0 +1,17 @@
+---
+'@qwik-ui/styled': minor
+'qwik-ui': minor
+---
+
+feat: Qwik UI has now fully migrated and updated the global.css config and components to use tailwind v4. You can copy/paste the components into your project(s) or use the CLI.
+
+## Migration guide:
+
+- Make sure to commit any changes before you start the steps below
+- Run the `npx @tailwindcss/upgrade` script and let it do most of the work for you
+- Remove your tailwind.config.cjs and postcss.config.cjs
+- install the @tailwindcss/vite package and pass it to your vite.config plugins array
+- Copy paste the new css config base tokens, or use the `qwik-ui init` to get them, and adapt them to your project
+- If you are in a monorepo, make sure to `@source “../../../path/to/your/components“;`
+- Add `"w-full"` to Modal PanelVariants position.top and position.bottom; add `"m-auto"` to position.center
+- If you didn't modify some components, you can re-copy/paste (or re-install them with the cli) for their most up to date version

.prettierrc

@@ -4,6 +4,6 @@
   "trailingComma": "all",
   "printWidth": 90,
   "plugins": ["prettier-plugin-tailwindcss"],
-  "tailwindConfig": "./apps/website/tailwind.config.cjs",
+  "tailwindStylesheet": "./apps/website/src/global.css",
   "tailwindFunctions": ["clsx", "cva"]
 }

.vscode/settings.json

@@ -4,6 +4,7 @@
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ],
+  "tailwindCSS.experimental.configFile": "apps/website/src/global.css",
   "editor.codeActionsOnSave": {
     "source.removeUnusedImports": "explicit"
   },