Fixing grouped option paddings

erimicel · Jan 5, 2025 · e41a2f4 · e41a2f4
1 parent ede267f
commit e41a2f4
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,6 @@ https://erimicel.github.io/select2-tailwindcss-theme/
 - [ ] Prepend and Append Styles
 - [ ] Error state
 - [ ] Fix height of multi select box
-- [ ] Fix padding on grouped options
 
 ## 📦 Installation
 

diff --git a/dist/select2-tailwindcss-theme-plain.css b/dist/select2-tailwindcss-theme-plain.css
@@ -143,6 +143,7 @@
 
 /* Group headers */
 .select2-container--tailwindcss-3 .select2-results__group{
+  display: flex;
   cursor: default;
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
@@ -159,6 +160,14 @@
   color: rgb(55 65 81 / var(--tw-text-opacity, 1))
 }
 
+/* Group container */
+.select2-container--tailwindcss-3 .select2-results__option--group{
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px
+}
+
 /* Loading state */
 .select2-container--tailwindcss-3 .select2-results__option--loading{
   display: flex;

diff --git a/dist/select2-tailwindcss-theme-plain.min.css b/dist/select2-tailwindcss-theme-plain.min.css
diff --git a/dist/select2-tailwindcss-theme.css b/dist/select2-tailwindcss-theme.css
@@ -51,7 +51,12 @@
 
 /* Group headers */
 .select2-container--tailwindcss-3 .select2-results__group {
-  @apply cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700;
+  @apply flex cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700;
+}
+
+/* Group container */
+.select2-container--tailwindcss-3 .select2-results__option--group {
+  @apply px-0 py-0;
 }
 
 /* Loading state */

diff --git a/dist/select2-tailwindcss-theme.min.css b/dist/select2-tailwindcss-theme.min.css