Alter example project

Author: alexaka1

examples/.gitignore

@@ -0,0 +1 @@
+!/dist/main.css

examples/dist/main.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -44,12 +46,14 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -121,8 +125,10 @@ strong {
 }
 
 /*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
 */
 
 code,
@@ -131,8 +137,12 @@ samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   /* 1 */
-  font-size: 1em;
+  font-feature-settings: normal;
   /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
 }
 
 /*
@@ -201,6 +211,8 @@ textarea {
   /* 1 */
   line-height: inherit;
   /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
   color: inherit;
   /* 1 */
   margin: 0;
@@ -224,9 +236,9 @@ select {
 */
 
 button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
   -webkit-appearance: button;
   /* 1 */
   background-color: transparent;
@@ -499,6 +511,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
   --tw-infinite: 99999;
   --tw-lightness-threshold: 0.6;
   --tw-min-contrast-lightness: 0;
@@ -553,6 +569,10 @@ video {
   --tw-backdrop-opacity:  ;
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
   --tw-infinite: 99999;
   --tw-lightness-threshold: 0.6;
   --tw-min-contrast-lightness: 0;
@@ -819,7 +839,7 @@ video {
 .bg-blue-600 {
   --tw-bg-l: 0.54615;
   --tw-bg-c: 0.215208;
-  --tw-bg-h: 262.880917;
+  --tw-bg-h: 262.880919;
   --tw-bg-l-offset: 0;
   --tw-bg-opacity: 1;
   background-color: oklch(clamp(0, calc(var(--tw-bg-l) + var(--tw-bg-l-offset)), 1) var(--tw-bg-c) var(--tw-bg-h) / var(--tw-bg-opacity));
@@ -866,7 +886,7 @@ video {
 .text-blue-600 {
   --tw-text-l: 0.54615;
   --tw-text-c: 0.215208;
-  --tw-text-h: 262.880917;
+  --tw-text-h: 262.880919;
   --tw-text-l-offset: 0;
   --tw-text-opacity: 1;
   color: oklch(clamp(0, calc(var(--tw-text-l) + var(--tw-text-l-offset)), 1) var(--tw-text-c) var(--tw-text-h) / var(--tw-text-opacity));
@@ -904,7 +924,7 @@ video {
 .hover\:bg-blue-400:hover {
   --tw-bg-l: 0.71374;
   --tw-bg-c: 0.143381;
-  --tw-bg-h: 254.624021;
+  --tw-bg-h: 254.624024;
   --tw-bg-l-offset: 0;
   --tw-bg-opacity: 1;
   background-color: oklch(clamp(0, calc(var(--tw-bg-l) + var(--tw-bg-l-offset)), 1) var(--tw-bg-c) var(--tw-bg-h) / var(--tw-bg-opacity));
@@ -921,7 +941,7 @@ video {
 .hover\:text-blue-800:hover {
   --tw-text-l: 0.424445;
   --tw-text-c: 0.180869;
-  --tw-text-h: 265.63771;
+  --tw-text-h: 265.637712;
   --tw-text-l-offset: 0;
   --tw-text-opacity: 1;
   color: oklch(clamp(0, calc(var(--tw-text-l) + var(--tw-text-l-offset)), 1) var(--tw-text-c) var(--tw-text-h) / var(--tw-text-opacity));

examples/index.html

@@ -15,7 +15,7 @@ <h1 class="text-xl font-bold mb-1">Tailwind OKLCH examples</h1>
       <a
         href="https://github.com/MartijnCuppens/tailwindcss-oklch"
         class="underline text-blue-600"
-        >View on github</a
+        >View on GitHub</a
       >
       -
       <a

examples/package.json

@@ -11,6 +11,6 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.4.3"
   }
 }

package.json

@@ -17,9 +17,6 @@
     "fmt": "prettier --check . --experimental-ternaries",
     "fmt:fix": "prettier --write . --experimental-ternaries"
   },
-  "peerDependencies": {
-    "tailwindcss": ">=3.4.0"
-  },
   "dependencies": {
     "colorjs.io": "^0.5.0"
   },