add forms usage to sveltekit example

examples/sveltekit-vite-plugin/package.json

@@ -13,6 +13,7 @@
   "devDependencies": {
     "@iconify-json/logos": "^1.1.31",
     "@iconify-json/ri": "^1.1.9",
+    "@julr/unocss-preset-forms": "^0.0.5",
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/kit": "^1.18.0",
     "@types/marked": "^5.0.0",

examples/sveltekit-vite-plugin/src/lib/Forms.svelte

@@ -0,0 +1,45 @@
+<div class="text-left">
+  <div class="mb-2">
+    You can find a port of <a href="https://tailwindcss-forms.vercel.app/"
+      >@tailwindcss/forms</a
+    >
+    for UnoCSS at
+    <a href="https://github.com/Julien-R44/unocss-preset-forms"
+      >Julien-R44/unocss-preset-forms</a
+    >. Here's a few examples but you should check out the original plugin's full
+    <a href="https://tailwindcss-forms.vercel.app/">demo</a>.
+  </div>
+
+  <div class="mb-2">
+    <input type="text" placeholder="out of the box input" />
+    <input type="text" placeholder="styled input" class="styled-input" />
+  </div>
+
+  <select>
+    <option>Out of the box</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+  </select>
+
+  <select class="pl-4 pr-12 py-3 rounded-full">
+    <option>Custom padding and rounding</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+  </select>
+
+  <div class="flex items-center">
+    <input id="my_rounded_checkbox" type="checkbox" class="rounded mr-2" />
+    <label for="my_rounded_checkbox">.rounded</label>
+  </div>
+
+  <div class="flex items-center">
+    <input id="my_checkbox" type="checkbox" class="text-pink-500 mr-2" />
+    <label for="my_checkbox">.text-pink-500</label>
+  </div>
+</div>
+
+<style>
+  a {
+    --at-apply: underline;
+  }
+</style>

examples/sveltekit-vite-plugin/src/routes/+page.svelte

@@ -4,6 +4,7 @@
   import Logos from "./Logos.svelte";
   import Prose from "./Prose.svelte";
   import RightToLeftDependent from "./RightToLeftDependent.svelte";
+  import Forms from "$lib/Forms.svelte";
 
   let red = false;
   let rtl = true;
@@ -18,7 +19,9 @@
 
   <Logos />
 
-  <p class="mt-10 font-mono">.font-mono is set to Fira Code => with nice ligatures (preset-web-fonts)</p>
+  <p class="mt-10 font-mono">
+    .font-mono is set to Fira Code => with nice ligatures (preset-web-fonts)
+  </p>
 
   <Prose />
 
@@ -49,6 +52,10 @@
 
   <Counter />
 
+  <div class="my-5 border" />
+
+  <Forms />
+
   <div class="corner">Fixed</div>
 </div>
 

examples/sveltekit-vite-plugin/uno.config.ts

@@ -1,13 +1,16 @@
 // UnoCSS config options can also be placed in vite.config.ts, but make sure to at least have a blank unocss.config.ts if you are having trouble getting the UnoCSS VSCode extension to work
 
 import { defineConfig, presetIcons, presetTypography, presetUno, presetWebFonts } from 'svelte-scoped-uno'
+import { presetForms } from '@julr/unocss-preset-forms'
 
 export default defineConfig({
   shortcuts: [
     { logo: 'i-logos:svelte-icon w-7em h-7em transform transition-300' },
+    { "styled-input": 'rounded-md border-gray-300 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50' },
   ],
   presets: [
     presetUno(),
+    presetForms(),
     presetIcons({
       prefix: 'i-',
       extraProperties: {
@@ -24,5 +27,5 @@ export default defineConfig({
       },
     }),
   ],
-  safelist: ['bg-orange-300', 'prose'],
+  safelist: ['bg-orange-300', 'prose', 'styled-input'],
 })