feat(styled kit): tailwind v4 update

[maiieul]

What is it?

• Feature / enhancement
• Bug
• Docs / tests
• Other

Why is it needed?

Closes #1115.

• Removed tailwind.config.cjs and postcss.config.cjs in favor of tailwind 4 vite plugin
• Ran the npx @tailwindcss/upgrade
• formatted all components with the new prettier-plugin-tailwindcss classes order and updated the docs accordingly
• Moved the theme configuration from the tailwind.config.cjs to the global.css and updated the docs and cli accordingly
• The qwik-ui cli will now install tailwind v4 by default
• fixed issue in the Collapsible headless with new preflight !important attribute on hidden elements prevented the component from calculating the offsetHeight of the CollapsibleContent (see v4 preflight adds !important on [hidden] attribute, unexpectedly preventing override tailwindlabs/tailwindcss#18653 (comment) and Add details about hidden attribute preflight rules tailwindlabs/tailwindcss.com#2321)

Upgrade guide:

• 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 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

Checklist:

• My code follows the developer guidelines of this project
• I have performed a self-review of my own code
• I have ran pnpm change and documented my changes
• I have add necessary docs (if needed)
• Added new tests to cover the fix / functionality

[changeset-bot]

🦋 Changeset detected

Latest commit: 9aeb6e4

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

This PR includes changesets to release 3 packages

Name	Type
@qwik-ui/headless	Patch
@qwik-ui/styled	Minor
qwik-ui	Minor

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

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/qwikifiers/qwik-ui@1122

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/headless@1122

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/styled@1122

npm i https://pkg.pr.new/qwikifiers/qwik-ui/@qwik-ui/utils@1122

commit: 9aeb6e4

[maiieul]

We will submit this to potential alpha testers before merging as this is a pretty big change.

[jim-pettersson-github]

Is it just me or did the Accordion slide animation stop working when moving to tw4?

[maiieul]

@jim-pettersson-github It works on this PR. I've been busy with Qwik bundling issues though...