select2-tailwindcss-theme/dist/select2-tailwindcss-theme.css

A Select2 theme for Tailwindcss

@charset "UTF-8";
/* Base container */
.select2-container--tailwindcss-3 {
  @apply block;
}

/* Dropdown */
.select2-container--tailwindcss-3.select2-container--open .select2-dropdown {
  @apply w-full py-1 mt-1 overflow-auto text-base bg-white border-none rounded-md shadow-lg max-h-60 ring-1 ring-black/5 ring-opacity-5 focus:outline-none sm:text-sm dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-indigo-600 dark:focus:border-indigo-600;
}

/* Dropdown position */
.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--below {
  @apply origin-top;
}

.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--above {
  @apply origin-bottom;
}

/* Search box */
.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field {
  @apply block w-full px-3 py-1.5 text-base sm:text-sm/6 placeholder-gray-400 border-gray-300 border rounded-md shadow-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600 dark:bg-gray-700;
}

/* Results container */
.select2-container--tailwindcss-3 .select2-results__options {
  @apply overflow-auto max-h-60;
}

/* Option items */
.select2-container--tailwindcss-3 .select2-results__option {
  @apply relative py-2 pl-3 text-gray-900 transition-colors duration-150 ease-in-out cursor-default select-none pr-9 dark:text-white;
}

/* Disabled option items */
.select2-container--tailwindcss-3 .select2-results__option--disabled {
  @apply text-gray-500 cursor-not-allowed bg-gray-50 border-gray-200 dark:bg-white/10 dark:border-white/5;
}

/* Hover state */
.select2-container--tailwindcss-3 .select2-results__option--highlighted {
  @apply text-white bg-indigo-600;
}

.select2-container--tailwindcss-3 .select2-results__option--highlighted::after {
  @apply text-white !important;
}

/* Selected state */
.select2-container--tailwindcss-3 .select2-results__option--selected {
  @apply font-semibold dark:text-white;
}

/* Selected with checkmark */
.select2-container--tailwindcss-3 .select2-results__option--selected::after {
  @apply absolute inset-y-0 flex items-center text-indigo-600 right-3;
  content: "✓";
}

/* Group headers */
.select2-container--tailwindcss-3 .select2-results__group {
  @apply flex cursor-default bg-gray-50 px-3 py-1.5 text-xs font-medium uppercase tracking-wider text-gray-700 dark:bg-gray-800 dark:text-gray-300;
}

/* Group container */
.select2-container--tailwindcss-3 .select2-results__option--group {
  @apply px-0 py-0;
}

/* Input groups */
.input-group > * + select + .select2-container--tailwindcss-3 .select2-selection {
  @apply rounded-l-none border-l-0;
}

.input-group > .select2-container--tailwindcss-3:not(:last-child) .select2-selection {
  @apply rounded-r-none border-r-0;
}

/* Loading state */
.select2-container--tailwindcss-3 .select2-results__option--loading {
  @apply flex items-center justify-center py-4 text-gray-400;
}

/* Loading spinner */
.select2-container--tailwindcss-3 .select2-results__option--loading::after {
  @apply w-5 h-5 border-2 border-gray-300 rounded-full animate-spin border-t-indigo-600;
  content: "";
}

/* Error states */
.field_with_errors .select2-container--tailwindcss-3 .select2-selection,
select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection,
select:invalid ~ .select2-container--tailwindcss-3 .select2-selection {
  @apply border-red-500 text-red-900;
}
.field_with_errors .select2-container--tailwindcss-3 .select2-container--focus,
select.is-invalid ~ .select2-container--tailwindcss-3 .select2-container--focus,
select:invalid ~ .select2-container--tailwindcss-3 .select2-container--focus {
  @apply ring-red-500 border-red-500 !important;
}
.field_with_errors .select2-container--tailwindcss-3 .select2-selection__placeholder,
select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection__placeholder,
select:invalid ~ .select2-container--tailwindcss-3 .select2-selection__placeholder {
  @apply text-red-300;
}

/* Single Selection */
.select2-container--tailwindcss-3 .select2-selection--single {
  @apply relative w-full h-auto min-h-[2.25rem] py-1.5 pl-3 pr-8 text-left text-base sm:text-sm/6 transition-colors duration-200 ease-in-out bg-white border border-gray-300 rounded-md cursor-pointer dark:bg-white/5 dark:text-white dark:border-white/10;
}

/* Rendered text */
.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered {
  @apply block pl-0 pr-0 text-gray-900 truncate dark:text-white;
}

/* Placeholder */
.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder {
  @apply text-gray-400 dark:text-gray-500;
}

/* Arrow container */
.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow {
  @apply absolute inset-y-0 right-0 flex items-center pr-2;
}

/* Arrow */
.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow b {
  @apply w-5 h-5 text-gray-400 bg-center bg-no-repeat bg-contain;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* Disabled state */
.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single {
  @apply text-gray-500 cursor-not-allowed bg-gray-50 border-gray-200 dark:bg-white/20 dark:border-white/5;
}

.select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--single {
  @apply ring-0 border-gray-200 dark:border-white/5;
}

/* Clear button */
.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear {
  @apply font-bold absolute inset-y-0 right-0 flex items-center pr-[2rem] text-base sm:text-sm/6 text-gray-400 cursor-pointer hover:text-gray-700;
}

/* Focus styles for keyboard navigation */
.select2-container--tailwindcss-3.select2-container--focus .select2-selection--single {
  @apply ring-1 ring-indigo-600 border-indigo-600 outline-none;
}

/* RTL Support */
.select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered {
  @apply pl-10 pr-3;
}

/* Multiple selection */
.select2-container--tailwindcss-3 .select2-selection--multiple {
  @apply min-h-[2.25rem] h-auto rounded-md text-base sm:text-sm/6 bg-white py-1.5 px-3 border border-gray-300 cursor-default dark:bg-white/5 dark:text-white dark:border-white/10;
}

/* Multiple selection list */
.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered {
  @apply flex flex-row flex-wrap gap-2 m-0 p-0 list-none;
}

/* Multiple selection choices */
.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice {
  @apply inline-flex items-center rounded-md bg-indigo-100 px-2.5 py-0.5 text-base sm:text-sm/6 font-medium text-indigo-800;
}

/* Remove button */
.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove {
  @apply -ml-1 mr-1.5 h-4 w-4 pb-[0.10rem] items-center flex justify-center rounded-full text-indigo-600 hover:bg-blue-200 hover:text-indigo-900;
}

/* Search field in multiple selection */
.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline {
  @apply block;
}

.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field {
  @apply h-[1.5rem] p-0 m-0 text-base sm:text-sm/6 bg-transparent border-0 focus:outline-none focus:ring-0 dark:placeholder:text-gray-500 placeholder:text-gray-400;
}

/* Disabled state */
.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple {
  @apply text-gray-500 cursor-not-allowed bg-gray-50 border-gray-200 dark:bg-white/20 dark:border-white/5;
}

.select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--multiple {
  @apply ring-0 border-gray-200 dark:border-white/5;
}

/* Clearable state */
.select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable {
  @apply pr-4;
}

/* Clear button */
.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear {
  @apply font-bold absolute inset-y-0 right-0 flex items-center pr-4 text-base sm:text-sm/6 text-gray-400 cursor-pointer hover:text-gray-700;
}

/* Focus styles for keyboard navigation */
.select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple {
  @apply ring-1 ring-indigo-600 border-indigo-600 outline-none;
}