chore(examples): misc playing around changes

example/craco/src/App.js

@@ -5,8 +5,8 @@ function App() {
   return (
     <div >
       <header className="flex items-center justify-center flex-col w-full h-screen">
-        <img src={logo} className="animated animate-spin w-50 h-50" alt="logo" />
-        <p className="bg-blue-500 p-3 rounded">
+        <img src={logo} className="animated animate-spin w-50 h-50 origin-top" alt="logo" />
+        <p className="bg-blue-50 p-20 rounded-full">
           Edit <code>src/App.js</code> and save to reload.
         </p>
         <a

example/next/pages/index.jsx

@@ -11,7 +11,7 @@ export default function Home() {
 
       <main className={styles.main}>
         <h1 className={styles.title}>
-          <div className="pl-20px bg-yellow-300 font-white text-2xl">
+          <div className="bg-yellow-100 text-yellow-900 w-100 mx-auto text-2xl">
             Should be Yellow
           </div>
           Welcome to <a href="https://nextjs.org">Next.js!</a>
@@ -20,7 +20,9 @@ export default function Home() {
         <p className={styles.description + ' pt-35px'}>
           Get started by editing{' '}
           <code className={styles.code}>pages/index.js</code>
+
         </p>
+        <p><a href={ '/test' } className={ 'underline' }>go to test</a></p>
 
         <div className={styles.grid}>
           <div className="pl-50px bg-green-500 text-blue-200 text-2xl p-20 rounded-full text-white font-bold shadow">

example/next/pages/layout.jsx

@@ -1,6 +1,6 @@
 export default function Layout({ title, children }) {
   return (
-    <div id="layout-wrapper" className={ 'bg-gray-100 text-gray-900 dark:(bg-gray-900 text-gray-100)' }>
+    <div id="layout-wrapper" className="bg-gray-100 text-gray-900 dark:(bg-gray-900 text-gray-100)">
       {children}
       <style jsx global>{`
         body {

example/next/pages/test.jsx

@@ -0,0 +1,8 @@
+export default function Test() {
+  return (
+    <div>
+      <p>This is the test page</p>
+      <a href={ '/' } className="underline">return home</a>
+    </div>
+  )
+}

example/nuxt/components/ScssScoped.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="scss">
-    <h2>SCSS scoped</h2>
-    blue-400 -> blue-900
+    <h2>SCSS scoped hmr</h2>
+    blue-400 -> blue-500
   </div>
 </template>
 <style lang="scss" scoped>

example/nuxt/pages/index.vue

@@ -4,10 +4,10 @@
     Windi CSS 4
   </nav>
   <div
-    class="px-5 p-1 mx-auto text-4xl font-light bg-red-200 text-white transition-all hover:(text-green-100 rounded-full bg-teal-900)"
+    class="px-5 p-1 mx-auto text-4xl font-light bg-red-500 text-white transition-all hover:(text-green-100 rounded-full bg-teal-900)"
     :class="{ 'hover:w-1/2': true }"
   >
-    Hello World 33
+    Hello World
   </div>
   <h2 class="btn">
     Button

example/vue3/src/App.vue

@@ -4,8 +4,8 @@
     Windi test CSS
   </nav>
   <div
-    class="px-5 p-1 text-red hover:(text-green-100 rounded-full bg-teal-900)"
-    :class="{ 'bg-teal-100': true, 'hover:w-1/3': true }"
+    class="px-50 p-10 text-green-700 hover:(text-green-100 rounded-full bg-teal-900)"
+    :class="{ 'bg-green-100': true, 'hover:w-1/3': true }"
   >
     Hello World
   </div>

package.json

@@ -22,6 +22,7 @@
 		"test": "set DEBUG=windicss* && jest --coverage",
 		"lint": "eslint --fix --ext .ts,.js,.vue .",
 		"release": "dotenv release-it --",
+    "dev:craco": "yarn build && cd example/craco && yarn start",
 		"dev:svelte": "yarn build && cd example/svelte && yarn dev",
 		"dev:next": "yarn build && cd example/next && yarn dev",
 		"dev:nuxt": "yarn build && cd example/nuxt && yarn dev",