chore: Update playground to TailwindCSS v4 (#134)

* chore: update playground to Tailwind v4 * chore: no need for a changeset --------- Co-authored-by: Abdelrahman Awad <[email protected]>
formwerkjs · Feb 16, 2025 · e3cc622 · e3cc622
1 parent dfa7cf8
commit e3cc622
Show file tree

Hide file tree

Showing 23 changed files with 355 additions and 353 deletions.
diff --git a/packages/playground/package.json b/packages/playground/package.json
@@ -9,8 +9,9 @@
   },
   "dependencies": {
     "@formwerk/core": "workspace:*",
+    "@tailwindcss/postcss": "^4.0.6",
     "fuse.js": "^7.0.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.6",
     "vue": "^3.5.13",
     "vue-i18n": "^11.1.0",
     "yup": "^1.6.1",

diff --git a/packages/playground/postcss.config.js b/packages/playground/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    'tailwindcss/nesting': {},
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
   },
 };
diff --git a/packages/playground/src/components/CheckboxGroup.vue b/packages/playground/src/components/CheckboxGroup.vue
@@ -25,6 +25,8 @@ const { groupProps, labelProps, descriptionProps, errorMessageProps, errorMessag
 </template>
 
 <style scoped>
+@reference "../style.css";
+
 .checkbox-group {
   font-family: 'Monaspace Neon Var';
   display: flex;

diff --git a/packages/playground/src/components/CheckboxItem.vue b/packages/playground/src/components/CheckboxItem.vue
@@ -9,8 +9,8 @@ const { labelProps, inputProps, isChecked } = useCheckbox(props);
 <template>
   <div v-bind="inputProps" class="item flex items-center">
     <div class="checkbox-square">
-      <div v-if="indeterminate" class="w-3 h-1 bg-gray-400 flex-shrink-0"></div>
-      <div v-else class="w-4 h-4 rounded-md flex-shrink-0">
+      <div v-if="indeterminate" class="w-3 h-1 bg-gray-400 shrink-0"></div>
+      <div v-else class="w-4 h-4 rounded-md shrink-0">
         <svg v-if="isChecked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="fill-emerald-500">
           <path
             d="M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z"
@@ -24,16 +24,18 @@ const { labelProps, inputProps, isChecked } = useCheckbox(props);
 </template>
 
 <style scoped>
+@reference "../style.css";
+
 .item {
   font-family: 'Monaspace Neon Var';
   @apply text-white font-medium flex items-center gap-2;
 
   .checkbox-square {
-    @apply w-6 h-6 rounded-md flex-shrink-0 border border-gray-600 flex items-center justify-center bg-zinc-800;
+    @apply w-6 h-6 rounded-md shrink-0 border border-gray-600 flex items-center justify-center bg-zinc-800;
   }
 
   &:focus {
-    @apply outline-none;
+    @apply outline-hidden;
 
     .checkbox-square {
       @apply border-emerald-500;

diff --git a/packages/playground/src/components/InputNumber.vue b/packages/playground/src/components/InputNumber.vue
@@ -37,6 +37,8 @@ const { inputProps, labelProps, errorMessage, errorMessageProps, incrementButton
 </template>
 
 <style scoped lang="postcss">
+@reference "../style.css";
+
 .InputNumber {
   font-family: 'Monaspace Neon Var';
   @apply relative w-full max-w-xs;
@@ -47,7 +49,7 @@ const { inputProps, labelProps, errorMessage, errorMessageProps, incrementButton
   }
 
   input {
-    @apply py-3 px-4 w-full bg-zinc-800 focus:bg-zinc-900 focus:outline-none transition-colors duration-200 focus:border-emerald-500 disabled:cursor-not-allowed text-white font-medium text-xl;
+    @apply py-3 px-4 w-full bg-zinc-800 focus:bg-zinc-900 focus:outline-hidden transition-colors duration-200 focus:border-emerald-500 disabled:cursor-not-allowed text-white font-medium text-xl;
   }
 
   .wrapper {

diff --git a/packages/playground/src/components/InputSearch.vue b/packages/playground/src/components/InputSearch.vue
@@ -37,6 +37,8 @@ const { inputProps, labelProps, fieldValue, displayError, errorMessageProps, cle
 </template>
 
 <style scoped lang="postcss">
+@reference "../style.css";
+
 .InputSearch {
   font-family: 'Monaspace Neon Var';
   @apply relative w-full max-w-xs;
@@ -47,7 +49,7 @@ const { inputProps, labelProps, fieldValue, displayError, errorMessageProps, cle
   }
 
   input {
-    @apply rounded-md border-2 border-transparent py-3 w-full bg-zinc-800 focus:bg-zinc-900 focus:outline-none transition-colors duration-200 focus:border-emerald-500 disabled:cursor-not-allowed text-white font-medium;
+    @apply rounded-md border-2 border-transparent py-3 w-full bg-zinc-800 focus:bg-zinc-900 focus:outline-hidden transition-colors duration-200 focus:border-emerald-500 disabled:cursor-not-allowed text-white font-medium;
     @apply px-10;
 
     &::-webkit-search-cancel-button,

diff --git a/packages/playground/src/components/InputSelect.vue b/packages/playground/src/components/InputSelect.vue
@@ -80,6 +80,8 @@ const {
 </template>
 
 <style scoped lang="postcss">
+@reference "../style.css";
+
 .InputSelect {
   font-family: 'Monaspace Neon Var';
   @apply relative w-full max-w-xs;
@@ -94,7 +96,7 @@ const {
     anchor-name: --trigger;
 
     &:focus {
-      @apply outline-none border-emerald-500;
+      @apply outline-hidden border-emerald-500;
     }
 
     &:hover {

diff --git a/packages/playground/src/components/InputText.vue b/packages/playground/src/components/InputText.vue
@@ -19,6 +19,8 @@ const { inputProps, labelProps, errorMessageProps, isTouched, displayError } = u
 </template>
 
 <style scoped lang="postcss">
+@reference "../style.css";
+
 .InputText {
   font-family: 'Monaspace Neon Var';
   @apply relative w-full;
@@ -29,7 +31,7 @@ const { inputProps, labelProps, errorMessageProps, isTouched, displayError } = u
   }
 
   input {
-    @apply max-w-xs rounded-md border-2 border-transparent py-3 px-4 w-full bg-zinc-800 focus:bg-zinc-900 focus:outline-none transition-colors duration-200 focus:border-emerald-500 disabled:cursor-not-allowed text-white font-medium;
+    @apply max-w-xs rounded-md border-2 border-transparent py-3 px-4 w-full bg-zinc-800 focus:bg-zinc-900 focus:outline-hidden transition-colors duration-200 focus:border-emerald-500 disabled:cursor-not-allowed text-white font-medium;
   }
 
   .error-message {

diff --git a/packages/playground/src/components/InputTextArea.vue b/packages/playground/src/components/InputTextArea.vue
@@ -19,6 +19,8 @@ const { inputProps, labelProps, errorMessage, errorMessageProps } = useTextField
 </template>
 
 <style scoped lang="postcss">
+@reference "../style.css";
+
 .InputText {
   @apply relative w-full;
   margin-bottom: calc(1em * 1.5);
@@ -28,7 +30,7 @@ const { inputProps, labelProps, errorMessage, errorMessageProps } = useTextField
   }
 
   textarea {
-    @apply text-gray-800 rounded-md border-2 border-transparent py-3 px-4 w-full bg-gray-100 focus:outline-none transition-colors duration-200 focus:border-blue-500;
+    @apply text-gray-800 rounded-md border-2 border-transparent py-3 px-4 w-full bg-gray-100 focus:outline-hidden transition-colors duration-200 focus:border-blue-500;
   }
   .error-message {
     @apply absolute left-0 text-sm text-red-500;

diff --git a/packages/playground/src/components/MultiSlider.vue b/packages/playground/src/components/MultiSlider.vue
@@ -26,6 +26,8 @@ const t2 = useThumbMetadata(1);
 </template>
 
 <style scoped>
+@reference "../style.css";
+
 .slider {
   --track-width: 300px;
 

diff --git a/packages/playground/src/components/OptionGroup.vue b/packages/playground/src/components/OptionGroup.vue
@@ -2,7 +2,7 @@
   <div v-bind="groupProps" class="">
     <p
       v-bind="labelProps"
-      class="bg-gradient-to-r from-zinc-700 to-zinc-900 text-white px-2 py-1 select-none sticky top-0 font-medium"
+      class="bg-linear-to-r from-zinc-700 to-zinc-900 text-white px-2 py-1 select-none sticky top-0 font-medium"
     >
       {{ label }}
     </p>

diff --git a/packages/playground/src/components/OptionItem.vue b/packages/playground/src/components/OptionItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-bind="optionProps" class="option px-2 rounded py-1 border">
+  <div v-bind="optionProps" class="option px-2 rounded-sm py-1 border">
     <slot> {{ label }} </slot>
   </div>
 </template>
@@ -13,11 +13,13 @@ const { optionProps } = useOption(props);
 </script>
 
 <style scoped>
+@reference "../style.css";
+
 .option {
   @apply border-2 border-transparent select-none text-white font-normal cursor-pointer;
 
   &:focus {
-    @apply bg-emerald-500 outline-none text-red-500;
+    @apply bg-emerald-500 outline-hidden text-red-500;
   }
 
   &[aria-selected='true'] {

diff --git a/packages/playground/src/components/RadioGroup.vue b/packages/playground/src/components/RadioGroup.vue
@@ -25,6 +25,8 @@ const { groupProps, labelProps, descriptionProps, errorMessageProps, errorMessag
 </template>
 
 <style scoped>
+@reference "../style.css";
+
 .radio-group {
   display: flex;
   flex-direction: column;

diff --git a/packages/playground/src/components/RadioItem.vue b/packages/playground/src/components/RadioItem.vue
@@ -19,6 +19,8 @@ const { labelProps, inputProps } = useRadio(props);
 </template>
 
 <style scoped>
+@reference "../style.css";
+
 .radio-item {
   @apply text-white font-medium flex items-center gap-2;
 
@@ -41,7 +43,7 @@ const { labelProps, inputProps } = useRadio(props);
   }
 
   &:focus {
-    @apply outline-none;
+    @apply outline-hidden;
 
     .radio-item-inner {
       @apply border-emerald-500;

diff --git a/packages/playground/src/components/Repeater.vue b/packages/playground/src/components/Repeater.vue
@@ -60,7 +60,7 @@ const { items, addButtonProps, Iteration } = useFormRepeater(props);
 
     <button
       v-bind="addButtonProps"
-      class="bg-zinc-900 gap-2 flex items-center max-w-max font-medium text-white py-2 px-4 rounded"
+      class="bg-zinc-900 gap-2 flex items-center max-w-max font-medium text-white py-2 px-4 rounded-sm"
     >
       <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 fill-current text-zinc-400" viewBox="0 0 256 256">
         <path
@@ -74,6 +74,8 @@ const { items, addButtonProps, Iteration } = useFormRepeater(props);
 </template>
 
 <style scoped>
+@reference "../style.css";
+
 .repeater-container {
   display: flex;
   flex-direction: column;

diff --git a/packages/playground/src/components/RepeaterTest.vue b/packages/playground/src/components/RepeaterTest.vue
@@ -4,12 +4,12 @@
       <div v-for="(field, idx) in fields" :key="field.id" class="flex items-center">
         <InputText :name="`field[${idx}]`" :label="`Field ${idx}`" />
 
-        <button type="button" class="bg-red-500 rounded text-white p-2" @click="fields.splice(idx, 1)">X</button>
+        <button type="button" class="bg-red-500 rounded-sm text-white p-2" @click="fields.splice(idx, 1)">X</button>
       </div>
 
-      <button class="bg-zinc-700 text-white rounded p-1" type="button" @click="add">+ Add Field</button>
-      <button class="bg-zinc-700 text-white rounded p-1" type="button" @click="swap">Swap</button>
-      <button class="bg-zinc-700 text-white rounded p-1" type="button" @click="reverse">Reverse</button>
+      <button class="bg-zinc-700 text-white rounded-sm p-1" type="button" @click="add">+ Add Field</button>
+      <button class="bg-zinc-700 text-white rounded-sm p-1" type="button" @click="swap">Swap</button>
+      <button class="bg-zinc-700 text-white rounded-sm p-1" type="button" @click="reverse">Reverse</button>
 
       <!-- <InputSearch name="search" label="Search" :min-length="10" @submit="onSearchSubmit" /> -->
     </form>

diff --git a/packages/playground/src/components/Slider.vue b/packages/playground/src/components/Slider.vue
@@ -24,6 +24,8 @@ const thumbData = useThumbMetadata(0);
 </template>
 
 <style scoped>
+@reference "../style.css";
+
 .slider {
   --track-width: 300px;
 

diff --git a/packages/playground/src/components/Switch.vue b/packages/playground/src/components/Switch.vue
@@ -10,11 +10,11 @@ const { inputProps, labelProps, isPressed } = useSwitch(props);
   <div class="flex items-center">
     <div
       v-bind="inputProps"
-      class="flex items-center p-1 w-10 rounded-full transition-colors duration-200 cursor-pointer focus-visible:outline-none focus:ring-2 ring-emerald-500 ring-offset-2"
+      class="flex items-center p-1 w-10 rounded-full transition-colors duration-200 cursor-pointer focus-visible:outline-hidden focus:ring-2 ring-emerald-500 ring-offset-2"
       :class="{ 'bg-emerald-500': isPressed, 'bg-gray-400': !isPressed }"
     >
       <div
-        class="rounded-full w-4 h-4 flex-shrink-0 bg-white origin-center transition-transform duration-200"
+        class="rounded-full w-4 h-4 shrink-0 bg-white origin-center transition-transform duration-200"
         :class="{ 'translate-x-4': isPressed }"
       ></div>
     </div>

diff --git a/packages/playground/src/components/SwitchInput.vue b/packages/playground/src/components/SwitchInput.vue
@@ -15,7 +15,7 @@ const { inputProps, isPressed } = useSwitch(props);
       <input v-bind="inputProps" type="checkbox" class="sr-only" />
 
       <div
-        class="rounded-full w-3 h-3 flex-shrink-0 bg-white origin-center transition-transform duration-200"
+        class="rounded-full w-3 h-3 shrink-0 bg-white origin-center transition-transform duration-200"
         :class="{ 'translate-x-4': isPressed }"
       ></div>
     </div>

diff --git a/packages/playground/src/components/Thumb.vue b/packages/playground/src/components/Thumb.vue
@@ -13,6 +13,8 @@ const { thumbProps, currentValue } = useSliderThumb(props);
 </script>
 
 <style scoped>
+@reference "../style.css";
+
 .thumb {
   @apply bg-emerald-500 w-5 h-5 rounded-full;
 
@@ -35,7 +37,7 @@ const { thumbProps, currentValue } = useSliderThumb(props);
 
   &:focus,
   &:active {
-    @apply outline-none bg-emerald-600;
+    @apply outline-hidden bg-emerald-600;
 
     .tooltip {
       display: block;

diff --git a/packages/playground/src/style.css b/packages/playground/src/style.css
@@ -1,6 +1,22 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
 
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
@@ -19,7 +35,7 @@ body {
 }
 
 button[type='submit'] {
-  @apply bg-emerald-600 hover:bg-emerald-700 text-white py-2 px-4 rounded font-medium;
+  @apply bg-emerald-600 hover:bg-emerald-700 text-white py-2 px-4 rounded-sm font-medium;
 }
 
 :root {

diff --git a/packages/playground/tailwind.config.js b/packages/playground/tailwind.config.js