daisyui 1.19.0 → 1.22.0

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.22.0](https://github.com/saadeghi/daisyui/compare/v1.20.1...v1.22.0) (2022-01-08)
+
+
+### Features
+
+* add rating component (fix [#374](https://github.com/saadeghi/daisyui/issues/374)) ([6285227](https://github.com/saadeghi/daisyui/commit/6285227ffbf9818b9bc2d8be1a4a5a610ad09954))
+* responsive table compact (fix [#364](https://github.com/saadeghi/daisyui/issues/364)) ([6e3d9b1](https://github.com/saadeghi/daisyui/commit/6e3d9b1074a3f1b02af27d102c3b13e30427f511))
+
+## [1.21.0](https://github.com/saadeghi/daisyui/compare/v1.20.1...v1.21.0) (2022-01-01)
+
+
+### Features
+
+* responsive table compact (fix [#364](https://github.com/saadeghi/daisyui/issues/364)) ([6e3d9b1](https://github.com/saadeghi/daisyui/commit/6e3d9b1074a3f1b02af27d102c3b13e30427f511))
+
+### [1.20.1](https://github.com/saadeghi/daisyui/compare/v1.20.0...v1.20.1) (2021-12-30)
+
+
+### Bug Fixes
+
+* [#369](https://github.com/saadeghi/daisyui/issues/369) ([7b1b52b](https://github.com/saadeghi/daisyui/commit/7b1b52b71561e86dedf3e69f98e08143ed6a762a))
+
+## [1.20.0](https://github.com/saadeghi/daisyui/compare/v1.19.0...v1.20.0) (2021-12-26)
+
+
+### Features
+
+* support [checked=true] style on checkbox and toggle ([8131232](https://github.com/saadeghi/daisyui/commit/8131232836c145c23ed40707f4272fb00c6a3f1b))
+
 ## [1.19.0](https://github.com/saadeghi/daisyui/compare/v1.17.1...v1.19.0) (2021-12-22)
 
 

package/README.md

@@ -79,7 +79,7 @@ Loading CSS files from CDN is not recommended for production. It's better to ins
 
   
 ```html
-<link href="https://cdn.jsdelivr.net/npm/daisyui@1.18.0/dist/full.css" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/npm/daisyui@1.21.0/dist/full.css" rel="stylesheet" type="text/css" />
 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
 ```
 
@@ -207,6 +207,7 @@ Read the documents for more info:
   - [dailydev](https://app.daily.dev/posts/-4OPGw0te)
   - [Future Tech Blog (Japanese)](https://future-architect.github.io/articles/20211124a/)
 - Youtube videos
+  - [Supabase & Sveltekit - Build Twitter in 75 minutes](https://www.youtube.com/watch?v=mPQyckogDYc)
   - [Setup the Best Frontend JavaScript Stack - Svelte, Vite, TailwindCSS and DaisyUI](https://www.youtube.com/watch?v=mEBPN_9jTAE)
   - [Jamstack powered Image gallery with Cloudinary, Tailwind and DaisyUI](https://www.youtube.com/watch?v=Hpjq0D1vcpM)
   - [SvelteKit Crash Course w/ Tailwind CSS and DaisyUI, GraphQL and dynamic routes](https://www.youtube.com/watch?v=zH2qG9YwN3s)

package/dist/full.css

@@ -1541,6 +1541,14 @@ html{
   overflow:hidden;
 }
 
+.drawer.drawer-end{
+  direction:rtl;
+}
+
+.drawer.drawer-end>*{
+  direction:ltr;
+}
+
 .drawer.drawer-end .drawer-toggle~.drawer-side>.drawer-overlay+*{
   justify-self:end;
   --tw-translate-x:100%;
@@ -1692,6 +1700,7 @@ html{
   .drawer-mobile.drawer-end{
     grid-auto-columns:auto -webkit-max-content;
     grid-auto-columns:auto max-content;
+    direction:ltr;
   }
 
   .drawer-mobile.drawer-end>.drawer-toggle~.drawer-content{
@@ -2264,6 +2273,24 @@ html{
   outline:none;
 }
 
+.rating{
+  display:inline-flex;
+  position:relative;
+}
+
+.rating :where(input){
+  cursor:pointer;
+  -webkit-animation:rating-pop var(--animation-input, .25s) ease-out;
+  animation:rating-pop var(--animation-input, .25s) ease-out;
+  -webkit-appearance:none;
+  -moz-appearance:none;
+  appearance:none;
+  background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
+  --tw-bg-opacity:1;
+  height:1.5rem;
+  width:1.5rem;
+}
+
 .select{
   -webkit-appearance:none;
   -moz-appearance:none;
@@ -3194,7 +3221,7 @@ html{
   box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
 }
 
-.checkbox:checked{
+.checkbox:checked,.checkbox[checked=true]{
   --tw-bg-opacity:1;
   background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
   background-repeat:no-repeat;
@@ -3219,7 +3246,7 @@ html{
   box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
 }
 
-.checkbox-primary:checked{
+.checkbox-primary:checked,.checkbox-primary[checked=true]{
   --tw-bg-opacity:1;
   background-color:hsla(var(--p) / var(--tw-bg-opacity, 1));
   --tw-border-opacity:1;
@@ -3244,7 +3271,7 @@ html{
   box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
 }
 
-.checkbox-secondary:checked{
+.checkbox-secondary:checked,.checkbox-secondary[checked=true]{
   --tw-bg-opacity:1;
   background-color:hsla(var(--s) / var(--tw-bg-opacity, 1));
   --tw-border-opacity:1;
@@ -3269,7 +3296,7 @@ html{
   box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
 }
 
-.checkbox-accent:checked{
+.checkbox-accent:checked,.checkbox-accent[checked=true]{
   --tw-bg-opacity:1;
   background-color:hsla(var(--a) / var(--tw-bg-opacity, 1));
   --tw-border-opacity:1;
@@ -4218,6 +4245,57 @@ html{
   --range-shdw:var(--a);
 }
 
+.rating .rating-hidden{
+  background-color:transparent;
+  width:.5rem;
+}
+
+.rating input:checked~input{
+  --tw-bg-opacity:0.2;
+}
+
+.rating input:focus-visible{
+  transition-property:transform;
+  transition-duration:.15s;
+  transition-duration:.3s;
+  transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+  transform:translateY(-.125em);
+}
+
+.rating input:active:focus{
+  -webkit-animation:none;
+  animation:none;
+  transform:translateY(-.125em);
+}
+
+@-webkit-keyframes rating-pop{
+  0%{
+    transform:translateY(-.125em);
+  }
+
+  40%{
+    transform:translateY(-.125em);
+  }
+
+  to{
+    transform:translateY(0);
+  }
+}
+
+@keyframes rating-pop{
+  0%{
+    transform:translateY(-.125em);
+  }
+
+  40%{
+    transform:translateY(-.125em);
+  }
+
+  to{
+    transform:translateY(0);
+  }
+}
+
 .select-bordered{
   --tw-border-opacity:0.2;
 }
@@ -4635,12 +4713,6 @@ html{
   background-color:hsla(var(--b2) / var(--tw-bg-opacity, 1));
 }
 
-.table-compact td,.table-compact th{
-  font-size:.875rem;
-  line-height:1.25rem;
-  padding:.5rem;
-}
-
 .textarea-bordered{
   --tw-border-opacity:0.2;
 }
@@ -4774,14 +4846,14 @@ html{
   --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
 }
 
-.toggle:checked{
+.toggle:checked,.toggle[checked=true]{
   --chkbg:hsl(var(--bc));
   --tw-bg-opacity:1;
   --tw-border-opacity:1;
   box-shadow:var(--handleoffset) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset, var(--focus-shadow);
 }
 
-[dir=rtl] .toggle:checked{
+[dir=rtl] .toggle:checked,[dir=rtl] .toggle[checked=true]{
   box-shadow:calc(var(--handleoffset)*1) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset, var(--focus-shadow);
 }
 
@@ -4789,7 +4861,7 @@ html{
   --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
 }
 
-.toggle-primary:checked{
+.toggle-primary:checked,.toggle-primary[checked=true]{
   --chkbg:hsl(var(--p));
   --tw-bg-opacity:1;
   background-color:hsla(var(--p) / var(--tw-bg-opacity, 1));
@@ -4804,7 +4876,7 @@ html{
   --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
 }
 
-.toggle-secondary:checked{
+.toggle-secondary:checked,.toggle-secondary[checked=true]{
   --chkbg:hsl(var(--s));
   --tw-bg-opacity:1;
   background-color:hsla(var(--s) / var(--tw-bg-opacity, 1));
@@ -4819,7 +4891,7 @@ html{
   --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
 }
 
-.toggle-accent:checked{
+.toggle-accent:checked,.toggle-accent[checked=true]{
   --chkbg:hsl(var(--a));
   --tw-bg-opacity:1;
   background-color:hsla(var(--a) / var(--tw-bg-opacity, 1));
@@ -9407,6 +9479,26 @@ html{
   width:2rem;
 }
 
+.rating-xs input{
+  height:.75rem;
+  width:.75rem;
+}
+
+.rating-sm input{
+  height:1rem;
+  width:1rem;
+}
+
+.rating-md input{
+  height:1.5rem;
+  width:1.5rem;
+}
+
+.rating-lg input{
+  height:2.5rem;
+  width:2.5rem;
+}
+
 .select-md{
   height:3rem;
   font-size:.875rem;
@@ -9771,6 +9863,18 @@ html{
   margin-left:50%;
 }
 
+.table-normal :where(th,td){
+  font-size:1rem;
+  line-height:1.5rem;
+  padding:1rem;
+}
+
+.table-compact :where(th,td){
+  font-size:.875rem;
+  line-height:1.25rem;
+  padding:.5rem;
+}
+
 @media (min-width:640px){
   .sm\:animate-none{
     -webkit-animation:none;
@@ -14120,6 +14224,26 @@ html{
     width:2rem;
   }
 
+  .sm\:rating-xs input{
+    height:.75rem;
+    width:.75rem;
+  }
+
+  .sm\:rating-sm input{
+    height:1rem;
+    width:1rem;
+  }
+
+  .sm\:rating-md input{
+    height:1.5rem;
+    width:1.5rem;
+  }
+
+  .sm\:rating-lg input{
+    height:2.5rem;
+    width:2.5rem;
+  }
+
   .sm\:select-md{
     height:3rem;
     font-size:.875rem;
@@ -14483,6 +14607,18 @@ html{
     --tw-translate-y:-50%;
     margin-left:50%;
   }
+
+  .sm\:table-normal :where(th,td){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding:1rem;
+  }
+
+  .sm\:table-compact :where(th,td){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding:.5rem;
+  }
 }
 
 @media (min-width:768px){
@@ -18834,6 +18970,26 @@ html{
     width:2rem;
   }
 
+  .md\:rating-xs input{
+    height:.75rem;
+    width:.75rem;
+  }
+
+  .md\:rating-sm input{
+    height:1rem;
+    width:1rem;
+  }
+
+  .md\:rating-md input{
+    height:1.5rem;
+    width:1.5rem;
+  }
+
+  .md\:rating-lg input{
+    height:2.5rem;
+    width:2.5rem;
+  }
+
   .md\:select-md{
     height:3rem;
     font-size:.875rem;
@@ -19197,6 +19353,18 @@ html{
     --tw-translate-y:-50%;
     margin-left:50%;
   }
+
+  .md\:table-normal :where(th,td){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding:1rem;
+  }
+
+  .md\:table-compact :where(th,td){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding:.5rem;
+  }
 }
 
 @media (min-width:1024px){
@@ -23548,6 +23716,26 @@ html{
     width:2rem;
   }
 
+  .lg\:rating-xs input{
+    height:.75rem;
+    width:.75rem;
+  }
+
+  .lg\:rating-sm input{
+    height:1rem;
+    width:1rem;
+  }
+
+  .lg\:rating-md input{
+    height:1.5rem;
+    width:1.5rem;
+  }
+
+  .lg\:rating-lg input{
+    height:2.5rem;
+    width:2.5rem;
+  }
+
   .lg\:select-md{
     height:3rem;
     font-size:.875rem;
@@ -23911,6 +24099,18 @@ html{
     --tw-translate-y:-50%;
     margin-left:50%;
   }
+
+  .lg\:table-normal :where(th,td){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding:1rem;
+  }
+
+  .lg\:table-compact :where(th,td){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding:.5rem;
+  }
 }
 
 @media (min-width:1280px){
@@ -28262,6 +28462,26 @@ html{
     width:2rem;
   }
 
+  .xl\:rating-xs input{
+    height:.75rem;
+    width:.75rem;
+  }
+
+  .xl\:rating-sm input{
+    height:1rem;
+    width:1rem;
+  }
+
+  .xl\:rating-md input{
+    height:1.5rem;
+    width:1.5rem;
+  }
+
+  .xl\:rating-lg input{
+    height:2.5rem;
+    width:2.5rem;
+  }
+
   .xl\:select-md{
     height:3rem;
     font-size:.875rem;
@@ -28625,6 +28845,18 @@ html{
     --tw-translate-y:-50%;
     margin-left:50%;
   }
+
+  .xl\:table-normal :where(th,td){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding:1rem;
+  }
+
+  .xl\:table-compact :where(th,td){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding:.5rem;
+  }
 }
 
 @media (min-width:1536px){
@@ -32976,6 +33208,26 @@ html{
     width:2rem;
   }
 
+  .\32xl\:rating-xs input{
+    height:.75rem;
+    width:.75rem;
+  }
+
+  .\32xl\:rating-sm input{
+    height:1rem;
+    width:1rem;
+  }
+
+  .\32xl\:rating-md input{
+    height:1.5rem;
+    width:1.5rem;
+  }
+
+  .\32xl\:rating-lg input{
+    height:2.5rem;
+    width:2.5rem;
+  }
+
   .\32xl\:select-md{
     height:3rem;
     font-size:.875rem;
@@ -33339,5 +33591,17 @@ html{
     --tw-translate-y:-50%;
     margin-left:50%;
   }
+
+  .\32xl\:table-normal :where(th,td){
+    font-size:1rem;
+    line-height:1.5rem;
+    padding:1rem;
+  }
+
+  .\32xl\:table-compact :where(th,td){
+    font-size:.875rem;
+    line-height:1.25rem;
+    padding:.5rem;
+  }
 }
 

package/dist/styled.css

@@ -319,6 +319,12 @@
   display:grid;
   overflow:hidden;
 }
+  .drawer.drawer-end{
+    direction:rtl;
+  }
+  .drawer.drawer-end>*{
+    direction:ltr;
+  }
   .drawer.drawer-end .drawer-toggle~.drawer-side>.drawer-overlay+*{
       justify-self:end;
       --tw-translate-x:100%;
@@ -424,6 +430,7 @@
   .drawer-mobile.drawer-end{
     grid-auto-columns:auto -webkit-max-content;
     grid-auto-columns:auto max-content;
+    direction:ltr;
   }
       .drawer-mobile.drawer-end>.drawer-toggle~.drawer-content{
         height:auto;
@@ -867,6 +874,12 @@
 }
   .range:focus{
     outline:none;
+  }.rating{
+  display:inline-flex;
+  position:relative;
+}
+  .rating :where(input){
+    cursor:pointer;
   }.select{
   -webkit-appearance:none;
      -moz-appearance:none;
@@ -1702,10 +1715,12 @@
   .checkbox:focus-visible{
     box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
   }
-  .checkbox:checked{
+  .checkbox:checked,.checkbox[checked=true]{
     --tw-bg-opacity:1;
     background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
     background-repeat:no-repeat;
+  }
+  .checkbox:checked,.checkbox[checked=true]{
     -webkit-animation:checkmark var(--animation-input, .2s)  ease-in-out;
             animation:checkmark var(--animation-input, .2s)  ease-in-out;
     background-image:linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 0), linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 0), linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 0), linear-gradient(45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 0, hsl(var(--chkfg)) 40%, transparent 0), linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 0);
@@ -1723,7 +1738,7 @@
   .checkbox-primary:focus-visible{
       box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
-  .checkbox-primary:checked{
+  .checkbox-primary:checked,.checkbox-primary[checked=true]{
       --tw-bg-opacity:1;
       background-color:hsla(var(--p) / var(--tw-bg-opacity, 1));
       --tw-border-opacity:1;
@@ -1744,7 +1759,7 @@
   .checkbox-secondary:focus-visible{
       box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
     }
-  .checkbox-secondary:checked{
+  .checkbox-secondary:checked,.checkbox-secondary[checked=true]{
       --tw-bg-opacity:1;
       background-color:hsla(var(--s) / var(--tw-bg-opacity, 1));
       --tw-border-opacity:1;
@@ -1765,7 +1780,7 @@
   .checkbox-accent:focus-visible{
       box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
     }
-  .checkbox-accent:checked{
+  .checkbox-accent:checked,.checkbox-accent[checked=true]{
       --tw-bg-opacity:1;
       background-color:hsla(var(--a) / var(--tw-bg-opacity, 1));
       --tw-border-opacity:1;
@@ -2793,7 +2808,66 @@
   }
   .range-accent{
     --range-shdw:var(--a);
-  }.select{
+  }.rating :where(input){
+    -webkit-animation:rating-pop var(--animation-input, .25s) ease-out;
+            animation:rating-pop var(--animation-input, .25s) ease-out;
+    -webkit-appearance:none;
+       -moz-appearance:none;
+            appearance:none;
+    background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
+    --tw-bg-opacity:1;
+    height:1.5rem;
+    width:1.5rem;
+  }
+  .rating .rating-hidden{
+    background-color:transparent;
+    width:.5rem;
+  }
+  .rating input:checked~input{
+    --tw-bg-opacity:0.2;
+  }
+  .rating input:focus-visible{
+    transition-property:transform;
+    transition-duration:.15s;
+    transition-timing-function:cubic-bezier(.4, 0, .2, 1);
+    transition-duration:.3s;
+    transform:translateY(-.125em);
+  }
+  .rating input:active:focus{
+    -webkit-animation:none;
+            animation:none;
+  }
+  .rating input:active:focus{
+    transform:translateY(-.125em);
+  }
+
+@-webkit-keyframes rating-pop{
+  0%{
+    transform:translateY(-.125em);
+  }
+
+  40%{
+    transform:translateY(-.125em);
+  }
+
+  to{
+    transform:translateY(0);
+  }
+}
+
+@keyframes rating-pop{
+  0%{
+    transform:translateY(-.125em);
+  }
+
+  40%{
+    transform:translateY(-.125em);
+  }
+
+  to{
+    transform:translateY(0);
+  }
+}.select{
   --tw-bg-opacity:1;
   background-color:hsla(var(--b1) / var(--tw-bg-opacity, 1));
   --tw-border-opacity:1;
@@ -3263,11 +3337,6 @@
         --tw-bg-opacity:1;
         background-color:hsla(var(--b2) / var(--tw-bg-opacity, 1));
       }
-  .table-compact td,.table-compact th{
-      font-size:.875rem;
-      line-height:1.25rem;
-      padding:.5rem;
-    }
 .textarea{
   --tw-bg-opacity:1;
   background-color:hsla(var(--b1) / var(--tw-bg-opacity, 1));
@@ -3391,20 +3460,26 @@
   .toggle:focus-visible{
     --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
   }
-  .toggle:checked{
-    --chkbg:hsl(var(--bc));
+  .toggle:checked,.toggle[checked=true]{
+    --chkbg:hsl(var(--bc))
+  }
+  .toggle:checked,.toggle[checked=true]{
     --tw-bg-opacity:1;
     --tw-border-opacity:1;
+  }
+  .toggle:checked,.toggle[checked=true]{
     box-shadow:var(--handleoffset) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset, var(--focus-shadow);
   }
-  [dir=rtl] .toggle:checked{
+  [dir=rtl] .toggle:checked,[dir=rtl] .toggle[checked=true]{
       box-shadow:calc(var(--handleoffset)*1) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset, var(--focus-shadow);
     }
   .toggle-primary:focus-visible{
       --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
-  .toggle-primary:checked{
+  .toggle-primary:checked,.toggle-primary[checked=true]{
       --chkbg:hsl(var(--p));
+    }
+  .toggle-primary:checked,.toggle-primary[checked=true]{
       --tw-bg-opacity:1;
       background-color:hsla(var(--p) / var(--tw-bg-opacity, 1));
       --tw-border-opacity:1;
@@ -3416,8 +3491,10 @@
   .toggle-secondary:focus-visible{
       --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
     }
-  .toggle-secondary:checked{
+  .toggle-secondary:checked,.toggle-secondary[checked=true]{
       --chkbg:hsl(var(--s));
+    }
+  .toggle-secondary:checked,.toggle-secondary[checked=true]{
       --tw-bg-opacity:1;
       background-color:hsla(var(--s) / var(--tw-bg-opacity, 1));
       --tw-border-opacity:1;
@@ -3429,8 +3506,10 @@
   .toggle-accent:focus-visible{
       --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
     }
-  .toggle-accent:checked{
+  .toggle-accent:checked,.toggle-accent[checked=true]{
       --chkbg:hsl(var(--a));
+    }
+  .toggle-accent:checked,.toggle-accent[checked=true]{
       --tw-bg-opacity:1;
       background-color:hsla(var(--a) / var(--tw-bg-opacity, 1));
       --tw-border-opacity:1;