WIP: fix build issues with website

Author: shairez

apps/website/src/_fluffy/button/button.ts

@@ -72,6 +72,15 @@
   }
 }
 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
 :root {
   --qwik-dark-blue: #006ce9;
   --qwik-light-blue: #18b6f6;

apps/website/src/global.css

@@ -5,24 +5,24 @@ export default component$(() => {
   return (
     <article class="max-w-prose">
       <h1 class="text-xl">Installation</h1>
-      <p class="text-lg mb-6">
+      <p class="mb-6 text-lg">
         To get started with the Fluffy (styled) Kit for Qwik UI, run the following command
         to install the Fluffy Kit via npm:
       </p>
 
       <div class="mt-4">
-        <pre class="bg-black max-w-prose p-8 border-white border text-white">
+        <pre class="max-w-prose border border-white bg-black p-8 text-white">
           npm install -D @qwik-ui/fluffy
         </pre>
       </div>
 
-      <p class="text-lg mt-6 mb-6">
+      <p class="mb-6 mt-6 text-lg">
         Which should install DasiyUI as part of its dependencies. Then you can add daisyUI
         to your <code class="bg-black">tailwind.config.js</code> file:
       </p>
 
       <div class="mt-4">
-        <pre class="bg-black max-w-prose p-8 border-white border text-white">
+        <pre class="max-w-prose border border-white bg-black p-8 text-white">
           {`module.exports = {
   //...
     plugins: [require("daisyui")],
@@ -31,12 +31,12 @@ export default component$(() => {
         </pre>
       </div>
 
-      <p class="text-lg mt-6 mb-6">
+      <p class="mb-6 mt-6 text-lg">
         This will install That's it! The Fluffy Kit is now installed and ready for use in
         your Qwik project.
       </p>
 
-      <p class="text-lg mb-6">
+      <p class="mb-6 text-lg">
         Now you can start building your fully designed, accessible Qwik web applications
         using the Qwik UI Fluffy Kit.
       </p>
@@ -45,5 +45,5 @@ export default component$(() => {
 });
 
 export const head: DocumentHead = {
-  title: 'Qwik UI | Fluffy (styled) Kit - Installation'
+  title: 'Qwik UI | Fluffy (styled) Kit - Installation',
 };

apps/website/src/routes/docs/fluffy/(getting-started)/install/index.tsx

@@ -1,8 +1,8 @@
-import { qwikVite } from '@builder.io/qwik/optimizer';
 import { qwikCity } from '@builder.io/qwik-city/vite';
+import { qwikVite } from '@builder.io/qwik/optimizer';
+import { qwikNxVite } from 'qwik-nx/plugins';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
-import { qwikNxVite } from 'qwik-nx/plugins';
 
 export default defineConfig({
   plugins: [

apps/website/vite.config.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from 'storybook-framework-qwik';
 import { Button, type ButtonProps } from './button';
 
 const meta: Meta<ButtonProps> = {
-  component: Button
+  component: Button,
 };
 
 type Story = StoryObj<ButtonProps>;
@@ -11,7 +11,7 @@ export default meta;
 
 export const Primary: Story = {
   args: {
-    size: 'medium'
+    // size: 'medium'
   },
-  render: (props) => <Button {...props}>Some button</Button>
+  render: (props) => <Button {...props}>Some button</Button>,
 };

packages/kit-fluffy/src/components/button/button.stories.tsx

@@ -1,9 +1,9 @@
-import { component$ } from '@builder.io/qwik';
+import { Slot, component$ } from '@builder.io/qwik';
 import { Tabs as HeadlessTabs } from '@qwik-ui/headless';
 
 export const Tabs = component$(() => {
   return (
-    <HeadlessTabs class={}>
+    <HeadlessTabs>
       <Slot />
     </HeadlessTabs>
   );