├── .gitignore
├── LICENSE
├── README.md
├── dist
    ├── select2-tailwindcss-theme-plain.css
    ├── select2-tailwindcss-theme-plain.min.css
    ├── select2-tailwindcss-theme.css
    └── select2-tailwindcss-theme.min.css
├── docs
    ├── README.md
    ├── css
    │   ├── select2-tailwindcss-theme-plain.min.css
    │   └── tailwind.css
    ├── index.html
    └── tailwind.css
├── package.json
├── postcss.config.js
├── src
    ├── _layout.scss
    ├── _multiple.scss
    ├── _single.scss
    └── select2-tailwindcss-theme.scss
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | yarn.lock
4 | dist/*.js
5 | vendor
6 | 
7 | # System files
8 | .DS_Store


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Erim Icel
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # select2-tailwindcss-theme
  2 | 
  3 | [![GitHub](https://img.shields.io/github/v/release/erimicel/select2-tailwindcss-theme?style=flat-square)](https://github.com/erimicel/select2-tailwindcss-theme)
  4 | [![npm version](https://img.shields.io/npm/v/select2-tailwindcss-theme?style=flat-square)](https://www.npmjs.com/package/select2-tailwindcss-theme)
  5 | [![npm](https://img.shields.io/npm/dm/select2-tailwindcss-theme?label=npm&style=flat-square)](https://www.npmjs.com/package/select2-tailwindcss-theme)
  6 | [![jsdelivr](https://data.jsdelivr.com/v1/package/gh/erimicel/select2-tailwindcss-theme/badge)](https://www.jsdelivr.com/package/gh/erimicel/select2-tailwindcss-theme)
  7 | [![License](https://img.shields.io/github/license/erimicel/select2-tailwindcss-theme?style=flat-square)](LICENSE)
  8 | 
  9 | [Select2](https://github.com/select2/select2) v4 theme for [TailwindCSS v3.4](https://tailwindcss.com/), inspired by [select2-bootstrap4-theme](https://github.com/ttskch/select2-bootstrap4-theme)
 10 | 
 11 | ## Live demo
 12 | 
 13 | https://erimicel.github.io/select2-tailwindcss-theme/
 14 | 
 15 | ## Repo and live demo for tailwindcss v4 theme
 16 | 
 17 | Demo: https://erimicel.github.io/select2-tailwindcss-v4-theme/
 18 | 
 19 | Repo: https://github.com/erimicel/select2-tailwindcss-v4-theme
 20 | 
 21 | ## 📦 Installation
 22 | 
 23 | ### CDN
 24 | 
 25 | ```html
 26 | <!-- Latest -->
 27 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/erimicel/select2-tailwindcss-theme/dist/select2-tailwindcss-theme-plain.min.css">
 28 | 
 29 | <!-- Different version change (x.x.x) -->
 30 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/erimicel/select2-tailwindcss-theme@x.x.x/dist/select2-tailwindcss-theme-plain.min.css">
 31 | ```
 32 | 
 33 | Install the package and ensure you have TailwindCSS installed in your project:
 34 | 
 35 | ```bash
 36 | # npm
 37 | $ npm install select2-tailwindcss-theme
 38 | 
 39 | # yarn
 40 | $ yarn add select2-tailwindcss-theme
 41 | ```
 42 | 
 43 | ## Usage
 44 | 
 45 | ```js
 46 | import 'select2-tailwindcss-theme/dist/select2-tailwindcss-theme.css'; // Regular version
 47 | // OR
 48 | import 'select2-tailwindcss-theme/dist/select2-tailwindcss-theme.min.css'; // Minified version
 49 | ```
 50 | 
 51 | ```js
 52 | $('select').select2({
 53 |   theme: 'tailwindcss-3',
 54 | });
 55 | ```
 56 | 
 57 | ### With tailwindcss config
 58 | 
 59 | Update your Tailwind configuration to include the package in the content array:
 60 | 
 61 | ```js
 62 | // tailwind.config.js
 63 | module.exports = {
 64 |   content: [
 65 |     './src/**/*.{html,js}',
 66 |     './node_modules/select2-tailwindcss-theme/dist/*.css', // Include the package
 67 |   ],
 68 |   theme: {
 69 |     extend: {},
 70 |   },
 71 |   plugins: [],
 72 | };
 73 | ```
 74 | 
 75 | Enable to dark mode by `dark` class toggle:
 76 | ```js
 77 | // tailwind.config.js
 78 | module.exports = {
 79 |   // The selector strategy replaced the class strategy in Tailwind CSS v3.4.1.
 80 |   darkMode: 'selector',
 81 | }
 82 | ```
 83 | 
 84 | ## Development
 85 | 
 86 | ```bash
 87 | git clone https://github.com/erimicel/select2-tailwindcss-theme.git
 88 | cd select2-tailwindcss-theme
 89 | npm install
 90 | ```
 91 | 
 92 | Modify the SCSS file in src/.scss. Build the CSS:
 93 | 
 94 | ```bash
 95 | npm run build:all   # Build all files and update demo as-well
 96 | ```
 97 | 
 98 | ## Contributing
 99 | 
100 | Contributions, issues, and feature requests are welcome! Fork the repository, create a new branch, commit your changes, push to your branch, and open a pull request:
101 | 
102 | ```bash
103 | git checkout -b feature-branch-name
104 | git commit -m 'Add some feature'
105 | git push origin feature-branch-name
106 | ```
107 | 
108 | If you find this package helpful, please ⭐ the repository on GitHub!


--------------------------------------------------------------------------------
/dist/select2-tailwindcss-theme-plain.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | 
  3 | /* Base container */
  4 | 
  5 | .select2-container--tailwindcss-3{
  6 |   display: block
  7 | }
  8 | 
  9 | /* Dropdown */
 10 | 
 11 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown{
 12 |   margin-top: 0.25rem;
 13 |   max-height: 15rem;
 14 |   width: 100%;
 15 |   overflow: auto;
 16 |   border-radius: 0.375rem;
 17 |   border-style: none;
 18 |   --tw-bg-opacity: 1;
 19 |   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 20 |   padding-top: 0.25rem;
 21 |   padding-bottom: 0.25rem;
 22 |   font-size: 1rem;
 23 |   line-height: 1.5rem;
 24 |   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
 25 |   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
 26 |   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 27 |   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
 28 |   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
 29 |   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 30 |   --tw-ring-color: rgb(0 0 0 / 0.05);
 31 |   --tw-ring-opacity: 0.05
 32 | }
 33 | 
 34 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown:focus{
 35 |   outline: 2px solid transparent;
 36 |   outline-offset: 2px
 37 | }
 38 | 
 39 | @media (min-width: 640px){
 40 |   .select2-container--tailwindcss-3.select2-container--open .select2-dropdown{
 41 |     font-size: 0.875rem;
 42 |     line-height: 1.25rem
 43 |   }
 44 | }
 45 | 
 46 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown:where(.dark, .dark *){
 47 |   --tw-border-opacity: 1;
 48 |   border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
 49 |   --tw-bg-opacity: 1;
 50 |   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 51 |   --tw-text-opacity: 1;
 52 |   color: rgb(255 255 255 / var(--tw-text-opacity, 1))
 53 | }
 54 | 
 55 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown:where(.dark, .dark *)::-moz-placeholder{
 56 |   --tw-placeholder-opacity: 1;
 57 |   color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1))
 58 | }
 59 | 
 60 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown:where(.dark, .dark *)::placeholder{
 61 |   --tw-placeholder-opacity: 1;
 62 |   color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1))
 63 | }
 64 | 
 65 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown:focus:where(.dark, .dark *){
 66 |   --tw-border-opacity: 1;
 67 |   border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
 68 |   --tw-ring-opacity: 1;
 69 |   --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1))
 70 | }
 71 | 
 72 | /* Dropdown position */
 73 | 
 74 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown--below{
 75 |   transform-origin: top
 76 | }
 77 | 
 78 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown--above{
 79 |   transform-origin: bottom
 80 | }
 81 | 
 82 | /* Search box */
 83 | 
 84 | .select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{
 85 |   display: block;
 86 |   width: 100%;
 87 |   border-radius: 0.375rem;
 88 |   border-width: 1px;
 89 |   --tw-border-opacity: 1;
 90 |   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 91 |   padding-left: 0.75rem;
 92 |   padding-right: 0.75rem;
 93 |   padding-top: 0.375rem;
 94 |   padding-bottom: 0.375rem;
 95 |   font-size: 1rem;
 96 |   line-height: 1.5rem
 97 | }
 98 | 
 99 | .select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::-moz-placeholder{
100 |   --tw-placeholder-opacity: 1;
101 |   color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1))
102 | }
103 | 
104 | .select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::placeholder{
105 |   --tw-placeholder-opacity: 1;
106 |   color: rgb(156 163 175 / var(--tw-placeholder-opacity, 1))
107 | }
108 | 
109 | .select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{
110 |   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
111 |   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
112 |   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
113 | }
114 | 
115 | .select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field:focus{
116 |   --tw-border-opacity: 1;
117 |   border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
118 |   outline: 2px solid transparent;
119 |   outline-offset: 2px;
120 |   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
121 |   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
122 |   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
123 |   --tw-ring-opacity: 1;
124 |   --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1))
125 | }
126 | 
127 | @media (min-width: 640px){
128 |   .select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{
129 |     font-size: 0.875rem;
130 |     line-height: 1.5rem
131 |   }
132 | }
133 | 
134 | .select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field:where(.dark, .dark *){
135 |   --tw-bg-opacity: 1;
136 |   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1))
137 | }
138 | 
139 | /* Results container */
140 | 
141 | .select2-container--tailwindcss-3 .select2-results__options{
142 |   max-height: 15rem;
143 |   overflow: auto
144 | }
145 | 
146 | /* Option items */
147 | 
148 | .select2-container--tailwindcss-3 .select2-results__option{
149 |   position: relative;
150 |   cursor: default;
151 |   -webkit-user-select: none;
152 |      -moz-user-select: none;
153 |           user-select: none;
154 |   padding-top: 0.5rem;
155 |   padding-bottom: 0.5rem;
156 |   padding-left: 0.75rem;
157 |   padding-right: 2.25rem;
158 |   --tw-text-opacity: 1;
159 |   color: rgb(17 24 39 / var(--tw-text-opacity, 1));
160 |   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
161 |   transition-duration: 150ms;
162 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
163 | }
164 | 
165 | .select2-container--tailwindcss-3 .select2-results__option:where(.dark, .dark *){
166 |   --tw-text-opacity: 1;
167 |   color: rgb(255 255 255 / var(--tw-text-opacity, 1))
168 | }
169 | 
170 | /* Disabled option items */
171 | 
172 | .select2-container--tailwindcss-3 .select2-results__option--disabled{
173 |   cursor: not-allowed;
174 |   --tw-border-opacity: 1;
175 |   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
176 |   --tw-bg-opacity: 1;
177 |   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
178 |   --tw-text-opacity: 1;
179 |   color: rgb(107 114 128 / var(--tw-text-opacity, 1))
180 | }
181 | 
182 | .select2-container--tailwindcss-3 .select2-results__option--disabled:where(.dark, .dark *){
183 |   border-color: rgb(255 255 255 / 0.05);
184 |   background-color: rgb(255 255 255 / 0.1)
185 | }
186 | 
187 | /* Hover state */
188 | 
189 | .select2-container--tailwindcss-3 .select2-results__option--highlighted{
190 |   --tw-bg-opacity: 1;
191 |   background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
192 |   --tw-text-opacity: 1;
193 |   color: rgb(255 255 255 / var(--tw-text-opacity, 1))
194 | }
195 | 
196 | .select2-container--tailwindcss-3 .select2-results__option--highlighted::after{
197 |   --tw-text-opacity: 1 !important;
198 |   color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important
199 | }
200 | 
201 | /* Selected state */
202 | 
203 | .select2-container--tailwindcss-3 .select2-results__option--selected{
204 |   font-weight: 600
205 | }
206 | 
207 | .select2-container--tailwindcss-3 .select2-results__option--selected:where(.dark, .dark *){
208 |   --tw-text-opacity: 1;
209 |   color: rgb(255 255 255 / var(--tw-text-opacity, 1))
210 | }
211 | 
212 | /* Selected with checkmark */
213 | 
214 | .select2-container--tailwindcss-3 .select2-results__option--selected::after{
215 |   position: absolute;
216 |   top: 0px;
217 |   bottom: 0px;
218 |   right: 0.75rem;
219 |   display: flex;
220 |   align-items: center;
221 |   --tw-text-opacity: 1;
222 |   color: rgb(79 70 229 / var(--tw-text-opacity, 1));
223 |   content: "✓"
224 | }
225 | 
226 | /* Group headers */
227 | 
228 | .select2-container--tailwindcss-3 .select2-results__group{
229 |   display: flex;
230 |   cursor: default;
231 |   --tw-bg-opacity: 1;
232 |   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
233 |   padding-left: 0.75rem;
234 |   padding-right: 0.75rem;
235 |   padding-top: 0.375rem;
236 |   padding-bottom: 0.375rem;
237 |   font-size: 0.75rem;
238 |   line-height: 1rem;
239 |   font-weight: 500;
240 |   text-transform: uppercase;
241 |   letter-spacing: 0.05em;
242 |   --tw-text-opacity: 1;
243 |   color: rgb(55 65 81 / var(--tw-text-opacity, 1))
244 | }
245 | 
246 | .select2-container--tailwindcss-3 .select2-results__group:where(.dark, .dark *){
247 |   --tw-bg-opacity: 1;
248 |   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
249 |   --tw-text-opacity: 1;
250 |   color: rgb(209 213 219 / var(--tw-text-opacity, 1))
251 | }
252 | 
253 | /* Group container */
254 | 
255 | .select2-container--tailwindcss-3 .select2-results__option--group{
256 |   padding-left: 0px;
257 |   padding-right: 0px;
258 |   padding-top: 0px;
259 |   padding-bottom: 0px
260 | }
261 | 
262 | /* Input groups */
263 | 
264 | .input-group > * + select + .select2-container--tailwindcss-3 .select2-selection{
265 |   border-top-left-radius: 0px;
266 |   border-bottom-left-radius: 0px;
267 |   border-left-width: 0px
268 | }
269 | 
270 | .input-group > .select2-container--tailwindcss-3:not(:last-child) .select2-selection{
271 |   border-top-right-radius: 0px;
272 |   border-bottom-right-radius: 0px;
273 |   border-right-width: 0px
274 | }
275 | 
276 | /* Loading state */
277 | 
278 | .select2-container--tailwindcss-3 .select2-results__option--loading{
279 |   display: flex;
280 |   align-items: center;
281 |   justify-content: center;
282 |   padding-top: 1rem;
283 |   padding-bottom: 1rem;
284 |   --tw-text-opacity: 1;
285 |   color: rgb(156 163 175 / var(--tw-text-opacity, 1))
286 | }
287 | 
288 | /* Loading spinner */
289 | 
290 | .select2-container--tailwindcss-3 .select2-results__option--loading::after{
291 |   height: 1.25rem;
292 |   width: 1.25rem
293 | }
294 | 
295 | @keyframes spin{
296 |   to{
297 |     transform: rotate(360deg)
298 |   }
299 | }
300 | 
301 | .select2-container--tailwindcss-3 .select2-results__option--loading::after{
302 |   animation: spin 1s linear infinite;
303 |   border-radius: 9999px;
304 |   border-width: 2px;
305 |   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
306 |   --tw-border-opacity: 1;
307 |   border-top-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
308 |   content: ""
309 | }
310 | 
311 | /* Error states */
312 | 
313 | .field_with_errors .select2-container--tailwindcss-3 .select2-selection,
314 | select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection,
315 | select:invalid ~ .select2-container--tailwindcss-3 .select2-selection{
316 |   --tw-border-opacity: 1;
317 |   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
318 |   --tw-text-opacity: 1;
319 |   color: rgb(127 29 29 / var(--tw-text-opacity, 1))
320 | }
321 | 
322 | .field_with_errors .select2-container--tailwindcss-3 .select2-container--focus,
323 | select.is-invalid ~ .select2-container--tailwindcss-3 .select2-container--focus,
324 | select:invalid ~ .select2-container--tailwindcss-3 .select2-container--focus{
325 |   --tw-border-opacity: 1 !important;
326 |   border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)) !important;
327 |   --tw-ring-opacity: 1 !important;
328 |   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)) !important
329 | }
330 | 
331 | .field_with_errors .select2-container--tailwindcss-3 .select2-selection__placeholder,
332 | select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection__placeholder,
333 | select:invalid ~ .select2-container--tailwindcss-3 .select2-selection__placeholder{
334 |   --tw-text-opacity: 1;
335 |   color: rgb(252 165 165 / var(--tw-text-opacity, 1))
336 | }
337 | 
338 | /* Single Selection */
339 | 
340 | .select2-container--tailwindcss-3 .select2-selection--single{
341 |   position: relative;
342 |   height: auto;
343 |   min-height: 2.25rem;
344 |   width: 100%;
345 |   cursor: pointer;
346 |   border-radius: 0.375rem;
347 |   border-width: 1px;
348 |   --tw-border-opacity: 1;
349 |   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
350 |   --tw-bg-opacity: 1;
351 |   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
352 |   padding-top: 0.375rem;
353 |   padding-bottom: 0.375rem;
354 |   padding-left: 0.75rem;
355 |   padding-right: 2rem;
356 |   text-align: left;
357 |   font-size: 1rem;
358 |   line-height: 1.5rem;
359 |   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
360 |   transition-duration: 200ms;
361 |   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
362 | }
363 | 
364 | @media (min-width: 640px){
365 |   .select2-container--tailwindcss-3 .select2-selection--single{
366 |     font-size: 0.875rem;
367 |     line-height: 1.5rem
368 |   }
369 | }
370 | 
371 | .select2-container--tailwindcss-3 .select2-selection--single:where(.dark, .dark *){
372 |   border-color: rgb(255 255 255 / 0.1);
373 |   background-color: rgb(255 255 255 / 0.05);
374 |   --tw-text-opacity: 1;
375 |   color: rgb(255 255 255 / var(--tw-text-opacity, 1))
376 | }
377 | 
378 | /* Rendered text */
379 | 
380 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered{
381 |   display: block;
382 |   overflow: hidden;
383 |   text-overflow: ellipsis;
384 |   white-space: nowrap;
385 |   padding-left: 0px;
386 |   padding-right: 0px;
387 |   --tw-text-opacity: 1;
388 |   color: rgb(17 24 39 / var(--tw-text-opacity, 1))
389 | }
390 | 
391 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered:where(.dark, .dark *){
392 |   --tw-text-opacity: 1;
393 |   color: rgb(255 255 255 / var(--tw-text-opacity, 1))
394 | }
395 | 
396 | /* Placeholder */
397 | 
398 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder{
399 |   --tw-text-opacity: 1;
400 |   color: rgb(156 163 175 / var(--tw-text-opacity, 1))
401 | }
402 | 
403 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder:where(.dark, .dark *){
404 |   --tw-text-opacity: 1;
405 |   color: rgb(107 114 128 / var(--tw-text-opacity, 1))
406 | }
407 | 
408 | /* Arrow container */
409 | 
410 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow{
411 |   position: absolute;
412 |   top: 0px;
413 |   bottom: 0px;
414 |   right: 0px;
415 |   display: flex;
416 |   align-items: center;
417 |   padding-right: 0.5rem
418 | }
419 | 
420 | /* Arrow */
421 | 
422 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow b{
423 |   height: 1.25rem;
424 |   width: 1.25rem;
425 |   background-size: contain;
426 |   background-position: center;
427 |   background-repeat: no-repeat;
428 |   --tw-text-opacity: 1;
429 |   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
430 |   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")
431 | }
432 | 
433 | /* Disabled state */
434 | 
435 | .select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single{
436 |   cursor: not-allowed;
437 |   --tw-border-opacity: 1;
438 |   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
439 |   --tw-bg-opacity: 1;
440 |   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
441 |   --tw-text-opacity: 1;
442 |   color: rgb(107 114 128 / var(--tw-text-opacity, 1))
443 | }
444 | 
445 | .select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single:where(.dark, .dark *){
446 |   border-color: rgb(255 255 255 / 0.05);
447 |   background-color: rgb(255 255 255 / 0.2)
448 | }
449 | 
450 | .select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--single{
451 |   --tw-border-opacity: 1;
452 |   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
453 |   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
454 |   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
455 |   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
456 | }
457 | 
458 | .select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--single:where(.dark, .dark *){
459 |   border-color: rgb(255 255 255 / 0.05)
460 | }
461 | 
462 | /* Clear button */
463 | 
464 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear{
465 |   position: absolute;
466 |   top: 0px;
467 |   bottom: 0px;
468 |   right: 0px;
469 |   display: flex;
470 |   cursor: pointer;
471 |   align-items: center;
472 |   padding-right: 2rem;
473 |   font-size: 1rem;
474 |   line-height: 1.5rem;
475 |   font-weight: 700;
476 |   --tw-text-opacity: 1;
477 |   color: rgb(156 163 175 / var(--tw-text-opacity, 1))
478 | }
479 | 
480 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear:hover{
481 |   --tw-text-opacity: 1;
482 |   color: rgb(55 65 81 / var(--tw-text-opacity, 1))
483 | }
484 | 
485 | @media (min-width: 640px){
486 |   .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear{
487 |     font-size: 0.875rem;
488 |     line-height: 1.5rem
489 |   }
490 | }
491 | 
492 | /* Focus styles for keyboard navigation */
493 | 
494 | .select2-container--tailwindcss-3.select2-container--focus .select2-selection--single{
495 |   --tw-border-opacity: 1;
496 |   border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
497 |   outline: 2px solid transparent;
498 |   outline-offset: 2px;
499 |   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
500 |   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
501 |   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
502 |   --tw-ring-opacity: 1;
503 |   --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1))
504 | }
505 | 
506 | /* RTL Support */
507 | 
508 | .select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered{
509 |   padding-left: 2.5rem;
510 |   padding-right: 0.75rem
511 | }
512 | 
513 | /* Multiple selection */
514 | 
515 | .select2-container--tailwindcss-3 .select2-selection--multiple{
516 |   height: auto;
517 |   min-height: 2.25rem;
518 |   cursor: default;
519 |   border-radius: 0.375rem;
520 |   border-width: 1px;
521 |   --tw-border-opacity: 1;
522 |   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
523 |   --tw-bg-opacity: 1;
524 |   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
525 |   padding-top: 0.375rem;
526 |   padding-bottom: 0.375rem;
527 |   padding-left: 0.75rem;
528 |   padding-right: 0.75rem;
529 |   font-size: 1rem;
530 |   line-height: 1.5rem
531 | }
532 | 
533 | @media (min-width: 640px){
534 |   .select2-container--tailwindcss-3 .select2-selection--multiple{
535 |     font-size: 0.875rem;
536 |     line-height: 1.5rem
537 |   }
538 | }
539 | 
540 | .select2-container--tailwindcss-3 .select2-selection--multiple:where(.dark, .dark *){
541 |   border-color: rgb(255 255 255 / 0.1);
542 |   background-color: rgb(255 255 255 / 0.05);
543 |   --tw-text-opacity: 1;
544 |   color: rgb(255 255 255 / var(--tw-text-opacity, 1))
545 | }
546 | 
547 | /* Multiple selection list */
548 | 
549 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered{
550 |   margin: 0px;
551 |   display: flex;
552 |   list-style-type: none;
553 |   flex-direction: row;
554 |   flex-wrap: wrap;
555 |   gap: 0.5rem;
556 |   padding: 0px
557 | }
558 | 
559 | /* Multiple selection choices */
560 | 
561 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice{
562 |   display: inline-flex;
563 |   align-items: center;
564 |   border-radius: 0.375rem;
565 |   --tw-bg-opacity: 1;
566 |   background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
567 |   padding-left: 0.625rem;
568 |   padding-right: 0.625rem;
569 |   padding-top: 0.125rem;
570 |   padding-bottom: 0.125rem;
571 |   font-size: 1rem;
572 |   line-height: 1.5rem;
573 |   font-weight: 500;
574 |   --tw-text-opacity: 1;
575 |   color: rgb(55 48 163 / var(--tw-text-opacity, 1))
576 | }
577 | 
578 | @media (min-width: 640px){
579 |   .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice{
580 |     font-size: 0.875rem;
581 |     line-height: 1.5rem
582 |   }
583 | }
584 | 
585 | /* Remove button */
586 | 
587 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove{
588 |   margin-left: -0.25rem;
589 |   margin-right: 0.375rem;
590 |   display: flex;
591 |   height: 1rem;
592 |   width: 1rem;
593 |   align-items: center;
594 |   justify-content: center;
595 |   border-radius: 9999px;
596 |   padding-bottom: 0.10rem;
597 |   --tw-text-opacity: 1;
598 |   color: rgb(79 70 229 / var(--tw-text-opacity, 1))
599 | }
600 | 
601 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove:hover{
602 |   --tw-bg-opacity: 1;
603 |   background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
604 |   --tw-text-opacity: 1;
605 |   color: rgb(49 46 129 / var(--tw-text-opacity, 1))
606 | }
607 | 
608 | /* Search field in multiple selection */
609 | 
610 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline{
611 |   display: block
612 | }
613 | 
614 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field{
615 |   margin: 0px;
616 |   height: 1.5rem;
617 |   border-width: 0px;
618 |   background-color: transparent;
619 |   padding: 0px;
620 |   font-size: 1rem;
621 |   line-height: 1.5rem
622 | }
623 | 
624 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::-moz-placeholder{
625 |   --tw-text-opacity: 1;
626 |   color: rgb(156 163 175 / var(--tw-text-opacity, 1))
627 | }
628 | 
629 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder{
630 |   --tw-text-opacity: 1;
631 |   color: rgb(156 163 175 / var(--tw-text-opacity, 1))
632 | }
633 | 
634 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:focus{
635 |   outline: 2px solid transparent;
636 |   outline-offset: 2px;
637 |   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
638 |   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
639 |   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
640 | }
641 | 
642 | @media (min-width: 640px){
643 |   .select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field{
644 |     font-size: 0.875rem;
645 |     line-height: 1.5rem
646 |   }
647 | }
648 | 
649 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:where(.dark, .dark *)::-moz-placeholder{
650 |   --tw-text-opacity: 1;
651 |   color: rgb(107 114 128 / var(--tw-text-opacity, 1))
652 | }
653 | 
654 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:where(.dark, .dark *)::placeholder{
655 |   --tw-text-opacity: 1;
656 |   color: rgb(107 114 128 / var(--tw-text-opacity, 1))
657 | }
658 | 
659 | /* Disabled state */
660 | 
661 | .select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple{
662 |   cursor: not-allowed;
663 |   --tw-border-opacity: 1;
664 |   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
665 |   --tw-bg-opacity: 1;
666 |   background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
667 |   --tw-text-opacity: 1;
668 |   color: rgb(107 114 128 / var(--tw-text-opacity, 1))
669 | }
670 | 
671 | .select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple:where(.dark, .dark *){
672 |   border-color: rgb(255 255 255 / 0.05);
673 |   background-color: rgb(255 255 255 / 0.2)
674 | }
675 | 
676 | .select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--multiple{
677 |   --tw-border-opacity: 1;
678 |   border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
679 |   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
680 |   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
681 |   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
682 | }
683 | 
684 | .select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--multiple:where(.dark, .dark *){
685 |   border-color: rgb(255 255 255 / 0.05)
686 | }
687 | 
688 | /* Clearable state */
689 | 
690 | .select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable{
691 |   padding-right: 1rem
692 | }
693 | 
694 | /* Clear button */
695 | 
696 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear{
697 |   position: absolute;
698 |   top: 0px;
699 |   bottom: 0px;
700 |   right: 0px;
701 |   display: flex;
702 |   cursor: pointer;
703 |   align-items: center;
704 |   padding-right: 1rem;
705 |   font-size: 1rem;
706 |   line-height: 1.5rem;
707 |   font-weight: 700;
708 |   --tw-text-opacity: 1;
709 |   color: rgb(156 163 175 / var(--tw-text-opacity, 1))
710 | }
711 | 
712 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear:hover{
713 |   --tw-text-opacity: 1;
714 |   color: rgb(55 65 81 / var(--tw-text-opacity, 1))
715 | }
716 | 
717 | @media (min-width: 640px){
718 |   .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear{
719 |     font-size: 0.875rem;
720 |     line-height: 1.5rem
721 |   }
722 | }
723 | 
724 | /* Focus styles for keyboard navigation */
725 | 
726 | .select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple{
727 |   --tw-border-opacity: 1;
728 |   border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
729 |   outline: 2px solid transparent;
730 |   outline-offset: 2px;
731 |   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
732 |   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
733 |   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
734 |   --tw-ring-opacity: 1;
735 |   --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity, 1))
736 | }
737 | 


--------------------------------------------------------------------------------
/dist/select2-tailwindcss-theme-plain.min.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.select2-container--tailwindcss-3{display:block}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{border-radius:.375rem;border-style:none;margin-top:.25rem;max-height:15rem;overflow:auto;width:100%;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding-bottom:.25rem;padding-top:.25rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(0,0,0,.05);--tw-ring-opacity:0.05}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width:640px){.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{font-size:.875rem;line-height:1.25rem}}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:where(.dark,.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:where(.dark,.dark *)::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:where(.dark,.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:focus:where(.dark,.dark *){--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity,1));--tw-ring-opacity:1;--tw-ring-color:rgb(79 70 229/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--below{transform-origin:top}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--above{transform-origin:bottom}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{border-radius:.375rem;border-width:1px;display:block;width:100%;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));font-size:1rem;line-height:1.5rem;padding:.375rem .75rem}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field:focus{--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(79 70 229/var(--tw-ring-opacity,1))}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.select2-container--tailwindcss-3 .select2-results__options{max-height:15rem;overflow:auto}.select2-container--tailwindcss-3 .select2-results__option{cursor:default;padding:.5rem 2.25rem .5rem .75rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1));transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.select2-container--tailwindcss-3 .select2-results__option:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--disabled{cursor:not-allowed;--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--disabled:where(.dark,.dark *){background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.05)}.select2-container--tailwindcss-3 .select2-results__option--highlighted{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--highlighted:after{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.select2-container--tailwindcss-3 .select2-results__option--selected{font-weight:600}.select2-container--tailwindcss-3 .select2-results__option--selected:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--selected:after{align-items:center;bottom:0;display:flex;position:absolute;right:.75rem;top:0;--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity,1));content:"✓"}.select2-container--tailwindcss-3 .select2-results__group{cursor:default;display:flex;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));font-size:.75rem;font-weight:500;letter-spacing:.05em;line-height:1rem;padding:.375rem .75rem;text-transform:uppercase;--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__group:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--group{padding:0}.input-group>*+select+.select2-container--tailwindcss-3 .select2-selection{border-bottom-left-radius:0;border-left-width:0;border-top-left-radius:0}.input-group>.select2-container--tailwindcss-3:not(:last-child) .select2-selection{border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}.select2-container--tailwindcss-3 .select2-results__option--loading{align-items:center;display:flex;justify-content:center;padding-bottom:1rem;padding-top:1rem;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--loading:after{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(1turn)}}.select2-container--tailwindcss-3 .select2-results__option--loading:after{animation:spin 1s linear infinite;border-color:rgb(209 213 219/var(--tw-border-opacity,1));border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-top-color:rgb(79 70 229/var(--tw-border-opacity,1));content:""}.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{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity,1))}.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{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important;--tw-ring-opacity:1!important;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))!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{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single{border-radius:.375rem;border-width:1px;cursor:pointer;height:auto;min-height:2.25rem;position:relative;width:100%;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding:.375rem 2rem .375rem .75rem;text-align:left;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--single{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3 .select2-selection--single:where(.dark,.dark *){background-color:hsla(0,0%,100%,.05);border-color:hsla(0,0%,100%,.1);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered{display:block;overflow:hidden;padding-left:0;padding-right:0;text-overflow:ellipsis;white-space:nowrap;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow{align-items:center;bottom:0;display:flex;padding-right:.5rem;position:absolute;right:0;top:0}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow b{background-position:50%;background-repeat:no-repeat;background-size:contain;height:1.25rem;width:1.25rem;--tw-text-opacity:1;background-image:url("data:image/svg+xml;charset=utf-8,%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 8 4 4 4-4'/%3E%3C/svg%3E");color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single{cursor:not-allowed;--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single:where(.dark,.dark *){background-color:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.05)}.select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--single{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--single:where(.dark,.dark *){border-color:hsla(0,0%,100%,.05)}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear{align-items:center;bottom:0;cursor:pointer;display:flex;font-size:1rem;font-weight:700;line-height:1.5rem;padding-right:2rem;position:absolute;right:0;top:0;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--single{--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(79 70 229/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-left:2.5rem;padding-right:.75rem}.select2-container--tailwindcss-3 .select2-selection--multiple{border-radius:.375rem;border-width:1px;cursor:default;height:auto;min-height:2.25rem;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding:.375rem .75rem}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--multiple{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3 .select2-selection--multiple:where(.dark,.dark *){background-color:hsla(0,0%,100%,.05);border-color:hsla(0,0%,100%,.1);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem;list-style-type:none;margin:0;padding:0}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice{align-items:center;border-radius:.375rem;display:inline-flex;--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity,1));font-size:1rem;font-weight:500;line-height:1.5rem;padding:.125rem .625rem;--tw-text-opacity:1;color:rgb(55 48 163/var(--tw-text-opacity,1))}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove{align-items:center;border-radius:9999px;display:flex;height:1rem;justify-content:center;margin-left:-.25rem;margin-right:.375rem;padding-bottom:.1rem;width:1rem;--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(49 46 129/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline{display:block}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field{background-color:transparent;border-width:0;font-size:1rem;height:1.5rem;line-height:1.5rem;margin:0;padding:0}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::-moz-placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:where(.dark,.dark *)::-moz-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:where(.dark,.dark *)::placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple{cursor:not-allowed;--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple:where(.dark,.dark *){background-color:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.05)}.select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--multiple{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--multiple:where(.dark,.dark *){border-color:hsla(0,0%,100%,.05)}.select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable{padding-right:1rem}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear{align-items:center;bottom:0;cursor:pointer;display:flex;font-size:1rem;font-weight:700;line-height:1.5rem;padding-right:1rem;position:absolute;right:0;top:0;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple{--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(79 70 229/var(--tw-ring-opacity,1))}


--------------------------------------------------------------------------------
/dist/select2-tailwindcss-theme.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | /* Base container */
  3 | .select2-container--tailwindcss-3 {
  4 |   @apply block;
  5 | }
  6 | 
  7 | /* Dropdown */
  8 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown {
  9 |   @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;
 10 | }
 11 | 
 12 | /* Dropdown position */
 13 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown--below {
 14 |   @apply origin-top;
 15 | }
 16 | 
 17 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown--above {
 18 |   @apply origin-bottom;
 19 | }
 20 | 
 21 | /* Search box */
 22 | .select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field {
 23 |   @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;
 24 | }
 25 | 
 26 | /* Results container */
 27 | .select2-container--tailwindcss-3 .select2-results__options {
 28 |   @apply overflow-auto max-h-60;
 29 | }
 30 | 
 31 | /* Option items */
 32 | .select2-container--tailwindcss-3 .select2-results__option {
 33 |   @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;
 34 | }
 35 | 
 36 | /* Disabled option items */
 37 | .select2-container--tailwindcss-3 .select2-results__option--disabled {
 38 |   @apply text-gray-500 cursor-not-allowed bg-gray-50 border-gray-200 dark:bg-white/10 dark:border-white/5;
 39 | }
 40 | 
 41 | /* Hover state */
 42 | .select2-container--tailwindcss-3 .select2-results__option--highlighted {
 43 |   @apply text-white bg-indigo-600;
 44 | }
 45 | 
 46 | .select2-container--tailwindcss-3 .select2-results__option--highlighted::after {
 47 |   @apply text-white !important;
 48 | }
 49 | 
 50 | /* Selected state */
 51 | .select2-container--tailwindcss-3 .select2-results__option--selected {
 52 |   @apply font-semibold dark:text-white;
 53 | }
 54 | 
 55 | /* Selected with checkmark */
 56 | .select2-container--tailwindcss-3 .select2-results__option--selected::after {
 57 |   @apply absolute inset-y-0 flex items-center text-indigo-600 right-3;
 58 |   content: "✓";
 59 | }
 60 | 
 61 | /* Group headers */
 62 | .select2-container--tailwindcss-3 .select2-results__group {
 63 |   @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;
 64 | }
 65 | 
 66 | /* Group container */
 67 | .select2-container--tailwindcss-3 .select2-results__option--group {
 68 |   @apply px-0 py-0;
 69 | }
 70 | 
 71 | /* Input groups */
 72 | .input-group > * + select + .select2-container--tailwindcss-3 .select2-selection {
 73 |   @apply rounded-l-none border-l-0;
 74 | }
 75 | 
 76 | .input-group > .select2-container--tailwindcss-3:not(:last-child) .select2-selection {
 77 |   @apply rounded-r-none border-r-0;
 78 | }
 79 | 
 80 | /* Loading state */
 81 | .select2-container--tailwindcss-3 .select2-results__option--loading {
 82 |   @apply flex items-center justify-center py-4 text-gray-400;
 83 | }
 84 | 
 85 | /* Loading spinner */
 86 | .select2-container--tailwindcss-3 .select2-results__option--loading::after {
 87 |   @apply w-5 h-5 border-2 border-gray-300 rounded-full animate-spin border-t-indigo-600;
 88 |   content: "";
 89 | }
 90 | 
 91 | /* Error states */
 92 | .field_with_errors .select2-container--tailwindcss-3 .select2-selection,
 93 | select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection,
 94 | select:invalid ~ .select2-container--tailwindcss-3 .select2-selection {
 95 |   @apply border-red-500 text-red-900;
 96 | }
 97 | .field_with_errors .select2-container--tailwindcss-3 .select2-container--focus,
 98 | select.is-invalid ~ .select2-container--tailwindcss-3 .select2-container--focus,
 99 | select:invalid ~ .select2-container--tailwindcss-3 .select2-container--focus {
100 |   @apply ring-red-500 border-red-500 !important;
101 | }
102 | .field_with_errors .select2-container--tailwindcss-3 .select2-selection__placeholder,
103 | select.is-invalid ~ .select2-container--tailwindcss-3 .select2-selection__placeholder,
104 | select:invalid ~ .select2-container--tailwindcss-3 .select2-selection__placeholder {
105 |   @apply text-red-300;
106 | }
107 | 
108 | /* Single Selection */
109 | .select2-container--tailwindcss-3 .select2-selection--single {
110 |   @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;
111 | }
112 | 
113 | /* Rendered text */
114 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered {
115 |   @apply block pl-0 pr-0 text-gray-900 truncate dark:text-white;
116 | }
117 | 
118 | /* Placeholder */
119 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder {
120 |   @apply text-gray-400 dark:text-gray-500;
121 | }
122 | 
123 | /* Arrow container */
124 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow {
125 |   @apply absolute inset-y-0 right-0 flex items-center pr-2;
126 | }
127 | 
128 | /* Arrow */
129 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow b {
130 |   @apply w-5 h-5 text-gray-400 bg-center bg-no-repeat bg-contain;
131 |   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");
132 | }
133 | 
134 | /* Disabled state */
135 | .select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single {
136 |   @apply text-gray-500 cursor-not-allowed bg-gray-50 border-gray-200 dark:bg-white/20 dark:border-white/5;
137 | }
138 | 
139 | .select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--single {
140 |   @apply ring-0 border-gray-200 dark:border-white/5;
141 | }
142 | 
143 | /* Clear button */
144 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear {
145 |   @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;
146 | }
147 | 
148 | /* Focus styles for keyboard navigation */
149 | .select2-container--tailwindcss-3.select2-container--focus .select2-selection--single {
150 |   @apply ring-1 ring-indigo-600 border-indigo-600 outline-none;
151 | }
152 | 
153 | /* RTL Support */
154 | .select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered {
155 |   @apply pl-10 pr-3;
156 | }
157 | 
158 | /* Multiple selection */
159 | .select2-container--tailwindcss-3 .select2-selection--multiple {
160 |   @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;
161 | }
162 | 
163 | /* Multiple selection list */
164 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered {
165 |   @apply flex flex-row flex-wrap gap-2 m-0 p-0 list-none;
166 | }
167 | 
168 | /* Multiple selection choices */
169 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice {
170 |   @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;
171 | }
172 | 
173 | /* Remove button */
174 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove {
175 |   @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;
176 | }
177 | 
178 | /* Search field in multiple selection */
179 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline {
180 |   @apply block;
181 | }
182 | 
183 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field {
184 |   @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;
185 | }
186 | 
187 | /* Disabled state */
188 | .select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple {
189 |   @apply text-gray-500 cursor-not-allowed bg-gray-50 border-gray-200 dark:bg-white/20 dark:border-white/5;
190 | }
191 | 
192 | .select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--multiple {
193 |   @apply ring-0 border-gray-200 dark:border-white/5;
194 | }
195 | 
196 | /* Clearable state */
197 | .select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable {
198 |   @apply pr-4;
199 | }
200 | 
201 | /* Clear button */
202 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear {
203 |   @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;
204 | }
205 | 
206 | /* Focus styles for keyboard navigation */
207 | .select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple {
208 |   @apply ring-1 ring-indigo-600 border-indigo-600 outline-none;
209 | }
210 | 


--------------------------------------------------------------------------------
/dist/select2-tailwindcss-theme.min.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.select2-container--tailwindcss-3{@apply block}.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}.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}.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}.select2-container--tailwindcss-3 .select2-results__options{@apply overflow-auto max-h-60}.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}.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}.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}.select2-container--tailwindcss-3 .select2-results__option--selected{@apply font-semibold dark:text-white}.select2-container--tailwindcss-3 .select2-results__option--selected:after{@apply absolute inset-y-0 flex items-center text-indigo-600 right-3;content:"✓"}.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}.select2-container--tailwindcss-3 .select2-results__option--group{@apply px-0 py-0}.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}.select2-container--tailwindcss-3 .select2-results__option--loading{@apply flex items-center justify-center py-4 text-gray-400}.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:""}.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}.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}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered{@apply block pl-0 pr-0 text-gray-900 truncate dark:text-white}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder{@apply text-gray-400 dark:text-gray-500}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow{@apply absolute inset-y-0 right-0 flex items-center pr-2}.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;charset=utf-8,%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 8 4 4 4-4'/%3E%3C/svg%3E")}.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}.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}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--single{@apply ring-1 ring-indigo-600 border-indigo-600 outline-none}.select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered{@apply pl-10 pr-3}.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}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered{@apply flex flex-row flex-wrap gap-2 m-0 p-0 list-none}.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}.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}.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}.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}.select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable{@apply pr-4}.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}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple{@apply ring-1 ring-indigo-600 border-indigo-600 outline-none}


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # Live demo
2 | 
3 | https://erimicel.github.io/select2-tailwindcss-theme/


--------------------------------------------------------------------------------
/docs/css/select2-tailwindcss-theme-plain.min.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";.select2-container--tailwindcss-3{display:block}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{border-radius:.375rem;border-style:none;margin-top:.25rem;max-height:15rem;overflow:auto;width:100%;--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding-bottom:.25rem;padding-top:.25rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-color:rgba(0,0,0,.05);--tw-ring-opacity:0.05}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:focus{outline:2px solid transparent;outline-offset:2px}@media (min-width:640px){.select2-container--tailwindcss-3.select2-container--open .select2-dropdown{font-size:.875rem;line-height:1.25rem}}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:where(.dark,.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:where(.dark,.dark *)::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:where(.dark,.dark *)::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown:focus:where(.dark,.dark *){--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity,1));--tw-ring-opacity:1;--tw-ring-color:rgb(79 70 229/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--below{transform-origin:top}.select2-container--tailwindcss-3.select2-container--open .select2-dropdown--above{transform-origin:bottom}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{border-radius:.375rem;border-width:1px;display:block;width:100%;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));font-size:1rem;line-height:1.5rem;padding:.375rem .75rem}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field:focus{--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(79 70 229/var(--tw-ring-opacity,1))}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.select2-container--tailwindcss-3 .select2-results__options{max-height:15rem;overflow:auto}.select2-container--tailwindcss-3 .select2-results__option{cursor:default;padding:.5rem 2.25rem .5rem .75rem;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1));transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.select2-container--tailwindcss-3 .select2-results__option:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--disabled{cursor:not-allowed;--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--disabled:where(.dark,.dark *){background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.05)}.select2-container--tailwindcss-3 .select2-results__option--highlighted{--tw-bg-opacity:1;background-color:rgb(79 70 229/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--highlighted:after{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.select2-container--tailwindcss-3 .select2-results__option--selected{font-weight:600}.select2-container--tailwindcss-3 .select2-results__option--selected:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--selected:after{align-items:center;bottom:0;display:flex;position:absolute;right:.75rem;top:0;--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity,1));content:"✓"}.select2-container--tailwindcss-3 .select2-results__group{cursor:default;display:flex;--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));font-size:.75rem;font-weight:500;letter-spacing:.05em;line-height:1rem;padding:.375rem .75rem;text-transform:uppercase;--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__group:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--group{padding:0}.input-group>*+select+.select2-container--tailwindcss-3 .select2-selection{border-bottom-left-radius:0;border-left-width:0;border-top-left-radius:0}.input-group>.select2-container--tailwindcss-3:not(:last-child) .select2-selection{border-bottom-right-radius:0;border-right-width:0;border-top-right-radius:0}.select2-container--tailwindcss-3 .select2-results__option--loading{align-items:center;display:flex;justify-content:center;padding-bottom:1rem;padding-top:1rem;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-results__option--loading:after{height:1.25rem;width:1.25rem}@keyframes spin{to{transform:rotate(1turn)}}.select2-container--tailwindcss-3 .select2-results__option--loading:after{animation:spin 1s linear infinite;border-color:rgb(209 213 219/var(--tw-border-opacity,1));border-radius:9999px;border-width:2px;--tw-border-opacity:1;border-top-color:rgb(79 70 229/var(--tw-border-opacity,1));content:""}.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{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1));--tw-text-opacity:1;color:rgb(127 29 29/var(--tw-text-opacity,1))}.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{--tw-border-opacity:1!important;border-color:rgb(239 68 68/var(--tw-border-opacity,1))!important;--tw-ring-opacity:1!important;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity,1))!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{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single{border-radius:.375rem;border-width:1px;cursor:pointer;height:auto;min-height:2.25rem;position:relative;width:100%;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding:.375rem 2rem .375rem .75rem;text-align:left;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--single{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3 .select2-selection--single:where(.dark,.dark *){background-color:hsla(0,0%,100%,.05);border-color:hsla(0,0%,100%,.1);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered{display:block;overflow:hidden;padding-left:0;padding-right:0;text-overflow:ellipsis;white-space:nowrap;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow{align-items:center;bottom:0;display:flex;padding-right:.5rem;position:absolute;right:0;top:0}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow b{background-position:50%;background-repeat:no-repeat;background-size:contain;height:1.25rem;width:1.25rem;--tw-text-opacity:1;background-image:url("data:image/svg+xml;charset=utf-8,%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 8 4 4 4-4'/%3E%3C/svg%3E");color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single{cursor:not-allowed;--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single:where(.dark,.dark *){background-color:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.05)}.select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--single{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--single:where(.dark,.dark *){border-color:hsla(0,0%,100%,.05)}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear{align-items:center;bottom:0;cursor:pointer;display:flex;font-size:1rem;font-weight:700;line-height:1.5rem;padding-right:2rem;position:absolute;right:0;top:0;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--single{--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(79 70 229/var(--tw-ring-opacity,1))}.select2-container--tailwindcss-3[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-left:2.5rem;padding-right:.75rem}.select2-container--tailwindcss-3 .select2-selection--multiple{border-radius:.375rem;border-width:1px;cursor:default;height:auto;min-height:2.25rem;--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1));font-size:1rem;line-height:1.5rem;padding:.375rem .75rem}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--multiple{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3 .select2-selection--multiple:where(.dark,.dark *){background-color:hsla(0,0%,100%,.05);border-color:hsla(0,0%,100%,.1);--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem;list-style-type:none;margin:0;padding:0}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice{align-items:center;border-radius:.375rem;display:inline-flex;--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity,1));font-size:1rem;font-weight:500;line-height:1.5rem;padding:.125rem .625rem;--tw-text-opacity:1;color:rgb(55 48 163/var(--tw-text-opacity,1))}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove{align-items:center;border-radius:9999px;display:flex;height:1rem;justify-content:center;margin-left:-.25rem;margin-right:.375rem;padding-bottom:.1rem;width:1rem;--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(49 46 129/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline{display:block}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field{background-color:transparent;border-width:0;font-size:1rem;height:1.5rem;line-height:1.5rem;margin:0;padding:0}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::-moz-placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:where(.dark,.dark *)::-moz-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field:where(.dark,.dark *)::placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple{cursor:not-allowed;--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1));--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1));--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple:where(.dark,.dark *){background-color:hsla(0,0%,100%,.2);border-color:hsla(0,0%,100%,.05)}.select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--multiple{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1));--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--multiple:where(.dark,.dark *){border-color:hsla(0,0%,100%,.05)}.select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable{padding-right:1rem}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear{align-items:center;bottom:0;cursor:pointer;display:flex;font-size:1rem;font-weight:700;line-height:1.5rem;padding-right:1rem;position:absolute;right:0;top:0;--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}@media (min-width:640px){.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear{font-size:.875rem;line-height:1.5rem}}.select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple{--tw-border-opacity:1;border-color:rgb(79 70 229/var(--tw-border-opacity,1));outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);--tw-ring-opacity:1;--tw-ring-color:rgb(79 70 229/var(--tw-ring-opacity,1))}


--------------------------------------------------------------------------------
/docs/css/tailwind.css:
--------------------------------------------------------------------------------
1 | *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }
2 | 
3 | /*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.my-12{margin-bottom:3rem;margin-top:3rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline{display:inline}.flex{display:flex}.hidden{display:none}.h-12{height:3rem}.w-12{width:3rem}.w-full{width:100%}.max-w-4xl{max-width:56rem}.shrink-0{flex-shrink:0}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1rem*var(--tw-space-y-reverse));margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)))}.rounded-lg{border-radius:.5rem}.rounded-l-md{border-bottom-left-radius:.375rem;border-top-left-radius:.375rem}.rounded-r-md{border-bottom-right-radius:.375rem;border-top-right-radius:.375rem}.border{border-width:1px}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.fill-violet-700{fill:#6d28d9}.fill-yellow-500{fill:#eab308}.p-2{padding:.5rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-2xl{font-size:1.5rem;line-height:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}@media (min-width:640px){.sm\:mb-0{margin-bottom:0}.sm\:text-sm\/6{font-size:.875rem;line-height:1.5rem}}.dark\:block:where(.dark,.dark *){display:block}.dark\:hidden:where(.dark,.dark *){display:none}.dark\:border-gray-800:where(.dark,.dark *){--tw-border-opacity:1;border-color:rgb(31 41 55/var(--tw-border-opacity,1))}.dark\:border-white\/10:where(.dark,.dark *){border-color:hsla(0,0%,100%,.1)}.dark\:bg-blue-950:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(23 37 84/var(--tw-bg-opacity,1))}.dark\:bg-gray-700:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\:bg-gray-900:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.dark\:bg-slate-800:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.dark\:bg-white\/5:where(.dark,.dark *){background-color:hsla(0,0%,100%,.05)}.dark\:text-white:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.dark\:hover\:bg-gray-600:hover:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8 |   <meta name="description" content="A Select2 theme for Tailwindcss">
  9 |   <meta name="author" content="Erim Icel">
 10 | 
 11 |   <title>Select2 Tailwindcss v3 Theme</title>
 12 |   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
 13 |   <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,container-queries"></script>
 14 | 
 15 |   <link href="css/tailwind.css" rel="stylesheet">
 16 |   <link href="https://cdn.jsdelivr.net/gh/erimicel/select2-tailwindcss-theme@1.2.4/dist/select2-tailwindcss-theme-plain.min.css" rel="stylesheet">
 17 |   <link href="css/select2-tailwindcss-theme-plain.min.css?v=1.2.4" rel="stylesheet">
 18 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 19 |   <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 20 |   <script>
 21 |     tailwind.config = {
 22 |       darkMode: 'selector',
 23 |     }
 24 |   </script>
 25 | 
 26 |   <script>
 27 |     // On page load or when changing themes, best to add inline in `head` to avoid FOUC
 28 |     document.documentElement.classList.toggle('dark', localStorage.theme === 'dark');
 29 |   </script>
 30 | </head>
 31 | 
 32 | <body class="font-sans antialiased bg-gray-100 dark:bg-gray-900">
 33 | 
 34 |   <header class="py-4 text-white bg-blue-600 shadow dark:bg-blue-950">
 35 |     <h1 class="text-xl font-bold text-center">Select2 Tailwindcss v3 Theme Demo</h1>
 36 |   </header>
 37 | 
 38 |   <main class="max-w-4xl p-6 mx-auto mt-8 bg-white rounded-lg shadow-lg dark:bg-slate-800">
 39 |     <div class="flex flex-row flex-wrap justify-between">
 40 |       <h2 class="mb-6 text-2xl font-semibold text-gray-800 dark:text-white">
 41 |         Examples of
 42 |         <a href="https://github.com/erimicel/select2-tailwindcss-theme" target="_blank" class="text-blue-600">
 43 |           @erimicel/select2-tailwindcss-theme
 44 |         </a>
 45 |       </h2>
 46 | 
 47 |       <div class="flex flex-row items-center mb-4 align-middle sm:mb-0">
 48 |         <span class="mr-2 text-sm font-semibold text-gray-700 dark:text-white">Switch Dark Mode</span>
 49 |         <button id="theme-toggle"
 50 |           class="w-12 h-12 p-2 border border-gray-100 rounded-lg bg-gray-50 hover:bg-gray-200 dark:bg-gray-700 dark:border-gray-800 dark:hover:bg-gray-600">
 51 |           <svg class="block fill-violet-700 dark:hidden" fill="currentColor" viewBox="0 0 20 20">
 52 |             <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
 53 |           </svg>
 54 |           <svg class="hidden fill-yellow-500 dark:block" fill="currentColor" viewBox="0 0 20 20">
 55 |             <path
 56 |               d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
 57 |               fill-rule="evenodd" clip-rule="evenodd"></path>
 58 |           </svg>
 59 |         </button>
 60 |       </div>
 61 |     </div>
 62 | 
 63 |     <form class="space-y-4">
 64 |       <!-- Single Select -->
 65 |       <div>
 66 |         <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of single select</label>
 67 |         <select data-placeholder="Choose one thing" data-allow-clear="1">
 68 |           <option></option>
 69 |           <option>1</option>
 70 |           <option>2</option>
 71 |           <option>3</option>
 72 |           <option>4</option>
 73 |           <option>5</option>
 74 |         </select>
 75 |       </div>
 76 | 
 77 |       <!-- Single Ajax Select -->
 78 |       <div>
 79 |         <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of single ajax select</label>
 80 |         <select data-placeholder="Search for github repos" data-allow-clear="1" data-fetch="https://api.github.com/search/repositories">
 81 |           <option></option>
 82 |         </select>
 83 |       </div>
 84 | 
 85 |       <!-- Tags Select -->
 86 |       <div>
 87 |         <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of dynamic option creation</label>
 88 |         <select multiple data-placeholder="Type anything" data-allow-clear="1" data-tags="1">
 89 |           <option>Alaska</option>
 90 |           <option>Hawaii</option>
 91 |           <!-- Additional options omitted for brevity -->
 92 |         </select>
 93 |       </div>
 94 | 
 95 |       <!-- Multiple Select -->
 96 |       <div>
 97 |         <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of multiple select</label>
 98 |         <select multiple data-placeholder="Choose anything" data-allow-clear="1">
 99 |           <option>Alaska</option>
100 |           <option>Hawaii</option>
101 |           <!-- Additional options omitted for brevity -->
102 |         </select>
103 |       </div>
104 | 
105 |       <!-- Disabled Select -->
106 |       <div>
107 |         <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of disabled select</label>
108 |         <select disabled data-placeholder="Cannot choose" data-allow-clear="1"></select>
109 |       </div>
110 | 
111 |       <!-- Disabled option -->
112 |       <div>
113 |         <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of disabled option</label>
114 |         <select data-placeholder="Cannot anything">
115 |           <option></option>
116 |           <option value="one">First</option>
117 |           <option value="two" disabled="disabled">Second (disabled)</option>
118 |           <option value="three">Third</option>
119 |         </select>
120 |       </div>
121 | 
122 |       <!-- Multiple Disabled Select -->
123 |       <div>
124 |         <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of disabled multiple select with selected items</label>
125 |         <select disabled multiple>
126 |           <option selected>Alaska</option>
127 |           <option selected>Hawaii</option>
128 |         </select>
129 |       </div>
130 | 
131 |       <!-- Select with Optgroup -->
132 |       <div>
133 |         <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of select with optgroup</label>
134 |         <select data-placeholder="Choose one thing" data-allow-clear="1">
135 |           <option></option>
136 |           <optgroup label="Group A">
137 |             <option>A1</option>
138 |             <option>A2</option>
139 |             <option>A3</option>
140 |           </optgroup>
141 |           <optgroup label="Group B">
142 |             <option>B1</option>
143 |             <option>B2</option>
144 |             <option>B3</option>
145 |           </optgroup>
146 |         </select>
147 |       </div>
148 | 
149 |       <!-- Input Group -->
150 |       <div>
151 |         <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of input group (.input-group)</label>
152 |         <div class="flex input-group">
153 |           <span class="flex items-center px-3 text-base text-gray-500 bg-white border border-gray-300 shrink-0 rounded-l-md sm:text-sm/6 dark:bg-white/5 dark:text-white dark:border-white/10">Prepend</span>
154 |           <select data-placeholder="Choose one thing" data-allow-clear="1">
155 |             <option></option>
156 |             <option>1</option>
157 |             <option>2</option>
158 |             <option>3</option>
159 |           </select>
160 |         </div>
161 | 
162 |         <div class="flex mt-1 input-group">
163 |           <select data-placeholder="Choose one thing" data-allow-clear="1">
164 |             <option></option>
165 |             <option>1</option>
166 |             <option>2</option>
167 |             <option>3</option>
168 |           </select>
169 |           <span class="flex items-center px-3 text-base text-gray-500 bg-white border border-gray-300 shrink-0 rounded-r-md sm:text-sm/6 dark:bg-white/5 dark:text-white dark:border-white/10">Append</span>
170 |         </div>
171 | 
172 |         <div class="flex mt-1 input-group">
173 |           <span class="flex items-center px-3 text-base text-gray-500 bg-white border border-gray-300 shrink-0 rounded-l-md sm:text-sm/6 dark:bg-white/5 dark:text-white dark:border-white/10">Prepend</span>
174 |           <select data-placeholder="Choose one thing" data-allow-clear="1">
175 |             <option></option>
176 |             <option>1</option>
177 |             <option>2</option>
178 |             <option>3</option>
179 |           </select>
180 |           <span class="flex items-center px-3 text-base text-gray-500 bg-white border border-gray-300 shrink-0 rounded-r-md sm:text-sm/6 dark:bg-white/5 dark:text-white dark:border-white/10">Append</span>
181 |         </div>
182 |       </div>
183 | 
184 |       <!-- Validated Select -->
185 |       <div>
186 |         <label class="block mb-2 text-sm font-medium text-gray-700 dark:text-white">Example of validated select (.is-valid, :invalid)</label>
187 |         <select class="is-invalid" data-placeholder="Invalid example" data-allow-clear="1">
188 |           <option></option>
189 |         </select>
190 |         <p class="mt-2 text-sm text-red-500">Something is wrong.</p>
191 |       </div>
192 |     </form>
193 |   </main>
194 | 
195 |   <footer class="my-12 text-center text-gray-600 dark:text-white">
196 |     <p class="text-sm">Select2 4.1.0-rc.0, TailwindCSS 3.4.17, jQuery 3.7.1</p>
197 |   </footer>
198 | 
199 |   <script>
200 |     $(function () {
201 |       // Toggle dark mode
202 |       document.getElementById('theme-toggle').addEventListener('click', () => {
203 |         localStorage.theme = localStorage.theme === 'dark' ? 'light' : 'dark';
204 | 
205 |         // On page load or when changing themes, best to add inline in `head` to avoid FOUC
206 |         document.documentElement.classList.toggle(
207 |           'dark',
208 |           localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
209 |         );
210 | 
211 |         console.log(localStorage.theme);
212 |       });
213 | 
214 |       // Select2 init
215 |       $('select').each(function () {
216 |         let options = {
217 |           theme: 'tailwindcss-3',
218 |           width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-full') ? '100%' : 'style',
219 |           placeholder: $(this).data('placeholder') || 'Select an option',
220 |           allowClear: Boolean($(this).data('allow-clear')),
221 |           closeOnSelect: !$(this).attr('multiple'),
222 |           tags: Boolean($(this).data('tags')),
223 |         };
224 | 
225 |         if ($(this).data('fetch')) {
226 |           options = {
227 |             ...options,
228 |             ajax: {
229 |               url: $(this).data('fetch'),
230 |               dataType: 'json',
231 |               delay: 250,
232 |               data: function (params) {
233 |                 return {
234 |                   q: params.term, // search term
235 |                   page: params.page
236 |                 };
237 |               },
238 |               processResults: function (data, params) {
239 |                 // parse the results into the format expected by Select2
240 |                 // since we are using custom formatting functions we do not need to
241 |                 // alter the remote JSON data, except to indicate that infinite
242 |                 // scrolling can be used
243 |                 params.page = params.page || 1;
244 | 
245 |                 return {
246 |                   results: data.items,
247 |                   pagination: {
248 |                     more: (params.page * 30) < data.total_count
249 |                   }
250 |                 };
251 |               },
252 |               cache: true
253 |             },
254 |             minimumInputLength: 1,
255 |             templateResult: formatRepo,
256 |             templateSelection: formatRepoSelection
257 |           };
258 |         }
259 | 
260 |         $(this).select2(options);
261 |       });
262 | 
263 |       function formatRepo(repo) {
264 |         if (repo.loading) {
265 |           return repo.text;
266 |         }
267 | 
268 |         var $container = $(
269 |           "<div class='flex'>" +
270 |           "<div class='text-base sm:text-sm/6 dark:text-white select2-result-repository__title'></div>" +
271 |           "</div>"
272 |         );
273 | 
274 |         $container.find(".select2-result-repository__title").text(repo.full_name);
275 | 
276 |         return $container;
277 |       }
278 | 
279 |       function formatRepoSelection(repo) {
280 |         return repo.full_name || repo.text;
281 |       }
282 |     });
283 |   </script>
284 | 
285 | </body>
286 | 
287 | </html>


--------------------------------------------------------------------------------
/docs/tailwind.css:
--------------------------------------------------------------------------------
1 | @charset "UTF-8";
2 | 
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "select2-tailwindcss-theme",
 3 |   "version": "1.2.4",
 4 |   "description": "A Select2 theme for Tailwindcss",
 5 |   "main": "dist/select2-tailwindcss-theme.css",
 6 |   "scripts": {
 7 |     "build": "sass src/select2-tailwindcss-theme.scss dist/select2-tailwindcss-theme.css --no-source-map",
 8 |     "build:min": "MINIFY=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme.min.css --verbose",
 9 |     "build:plain": "VERBOSE=true npx tailwindcss -i dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.css --verbose",
10 |     "build:plain:min": "MINIFY=true VERBOSE=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.min.css --verbose",
11 |     "build:demo": "cp ./dist/select2-tailwindcss-theme-plain.min.css ./docs/css/ && npx tailwindcss -i ./docs/tailwind.css -o ./docs/css/tailwind.css --minify",
12 |     "build:all": "npm run build && npm run build:min && npm run build:plain && npm run build:plain:min && npm run build:demo"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/erimicel/select2-tailwindcss-theme.git"
17 |   },
18 |   "files": [
19 |     "dist/",
20 |     "src/",
21 |     "LICENSE",
22 |     "README.md"
23 |   ],
24 |   "keywords": [
25 |     "select2",
26 |     "theme",
27 |     "select2-theme",
28 |     "tailwind",
29 |     "tailwindcss",
30 |     "css",
31 |     "scss",
32 |     "sass"
33 |   ],
34 |   "author": "Erim Icel <erimicel@gmail.com>",
35 |   "license": "MIT",
36 |   "bugs": {
37 |     "url": "https://github.com/erimicel/select2-tailwindcss-theme/issues"
38 |   },
39 |   "homepage": "https://github.com/erimicel/select2-tailwindcss-theme#readme",
40 |   "devDependencies": {
41 |     "autoprefixer": "^10.4.20",
42 |     "cssnano": "^7.0.6",
43 |     "postcss": "^8.4.49",
44 |     "postcss-cli": "^11.0.0",
45 |     "sass": "^1.83.1",
46 |     "tailwindcss": "^3.4.17"
47 |   }
48 | }
49 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const cssnano = require('cssnano')({ preset: 'default' });
 2 | const tailwindcss = require('tailwindcss');
 3 | 
 4 | module.exports = {
 5 |   plugins: [
 6 |     require('autoprefixer'),
 7 |     ...(process.env.VERBOSE === 'true' ? [tailwindcss] : []),
 8 |     ...(process.env.MINIFY === 'true' ? [cssnano] : []),
 9 |   ],
10 | };


--------------------------------------------------------------------------------
/src/_layout.scss:
--------------------------------------------------------------------------------
  1 | /* Base container */
  2 | .select2-container--tailwindcss-3 {
  3 |   @apply block;
  4 | }
  5 | 
  6 | /* Dropdown */
  7 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown {
  8 |   @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;
  9 | }
 10 | 
 11 | /* Dropdown position */
 12 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown--below {
 13 |   @apply origin-top;
 14 | }
 15 | 
 16 | .select2-container--tailwindcss-3.select2-container--open .select2-dropdown--above {
 17 |   @apply origin-bottom;
 18 | }
 19 | 
 20 | /* Search box */
 21 | .select2-container--tailwindcss-3 .select2-search--dropdown .select2-search__field {
 22 |   @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;
 23 | }
 24 | 
 25 | /* Results container */
 26 | .select2-container--tailwindcss-3 .select2-results__options {
 27 |   @apply overflow-auto max-h-60;
 28 | }
 29 | 
 30 | /* Option items */
 31 | .select2-container--tailwindcss-3 .select2-results__option {
 32 |   @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;
 33 | }
 34 | 
 35 | /* Disabled option items */
 36 | .select2-container--tailwindcss-3 .select2-results__option--disabled {
 37 |   @apply text-gray-500 cursor-not-allowed bg-gray-50 border-gray-200 dark:bg-white/10 dark:border-white/5;
 38 | }
 39 | 
 40 | /* Hover state */
 41 | .select2-container--tailwindcss-3 .select2-results__option--highlighted {
 42 |   @apply text-white bg-indigo-600;
 43 | }
 44 | 
 45 | .select2-container--tailwindcss-3 .select2-results__option--highlighted::after {
 46 |   @apply text-white #{!important}; 
 47 | }
 48 | 
 49 | /* Selected state */
 50 | .select2-container--tailwindcss-3 .select2-results__option--selected {
 51 |   @apply font-semibold dark:text-white;
 52 | }
 53 | 
 54 | /* Selected with checkmark */
 55 | .select2-container--tailwindcss-3 .select2-results__option--selected::after {
 56 |   @apply absolute inset-y-0 flex items-center text-indigo-600 right-3;
 57 |   content: "✓";
 58 | }
 59 | 
 60 | /* Group headers */
 61 | .select2-container--tailwindcss-3 .select2-results__group {
 62 |   @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;
 63 | }
 64 | 
 65 | /* Group container */
 66 | .select2-container--tailwindcss-3 .select2-results__option--group {
 67 |   @apply px-0 py-0;
 68 | }
 69 | 
 70 | /* Input groups */
 71 | .input-group > * + select + .select2-container--tailwindcss-3 .select2-selection {
 72 |   @apply rounded-l-none border-l-0;
 73 | }
 74 | 
 75 | .input-group > .select2-container--tailwindcss-3:not(:last-child) .select2-selection {
 76 |   @apply rounded-r-none border-r-0;
 77 | }
 78 | 
 79 | /* Loading state */
 80 | .select2-container--tailwindcss-3 .select2-results__option--loading {
 81 |   @apply flex items-center justify-center py-4 text-gray-400;
 82 | }
 83 | 
 84 | /* Loading spinner */
 85 | .select2-container--tailwindcss-3 .select2-results__option--loading::after {
 86 |   @apply w-5 h-5 border-2 border-gray-300 rounded-full animate-spin border-t-indigo-600;
 87 |   content: '';
 88 | }
 89 | 
 90 | /* Error states */
 91 | // Ruby on Rails common error fields
 92 | .field_with_errors .select2-container--tailwindcss-3,
 93 | // Common select invalid state
 94 | select.is-invalid ~ .select2-container--tailwindcss-3,
 95 | select:invalid ~ .select2-container--tailwindcss-3 {
 96 |   .select2-selection {
 97 |     @apply border-red-500 text-red-900;
 98 |   }
 99 |   .select2-container--focus {
100 |     @apply ring-red-500 border-red-500 #{!important};
101 |   }
102 |   .select2-selection__placeholder {
103 |     @apply text-red-300;
104 |   }
105 | }
106 | 


--------------------------------------------------------------------------------
/src/_multiple.scss:
--------------------------------------------------------------------------------
 1 | /* Multiple selection */
 2 | .select2-container--tailwindcss-3 .select2-selection--multiple {
 3 |   @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;
 4 | }
 5 | 
 6 | /* Multiple selection list */
 7 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered {
 8 |   @apply flex flex-row flex-wrap gap-2 m-0 p-0 list-none;
 9 | }
10 | 
11 | /* Multiple selection choices */
12 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice {
13 |   @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;
14 | }
15 | 
16 | /* Remove button */
17 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove {
18 |   @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;
19 | }
20 | 
21 | /* Search field in multiple selection */
22 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline {
23 |   @apply block;
24 | }
25 | 
26 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-search--inline .select2-search__field {
27 |   @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;
28 | }
29 | 
30 | /* Disabled state */
31 | .select2-container--tailwindcss-3.select2-container--disabled .select2-selection--multiple {
32 |   @apply text-gray-500 cursor-not-allowed bg-gray-50 border-gray-200 dark:bg-white/20 dark:border-white/5;
33 | }
34 | 
35 | .select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--multiple {
36 |   @apply ring-0 border-gray-200 dark:border-white/5;
37 | }
38 | 
39 | /* Clearable state */
40 | .select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable {
41 |   @apply pr-4;
42 | }
43 | 
44 | /* Clear button */
45 | .select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__clear {
46 |   @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;
47 | }
48 | 
49 | /* Focus styles for keyboard navigation */
50 | .select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple {
51 |   @apply ring-1 ring-indigo-600 border-indigo-600 outline-none;
52 | }
53 | 


--------------------------------------------------------------------------------
/src/_single.scss:
--------------------------------------------------------------------------------
 1 | /* Single Selection */
 2 | .select2-container--tailwindcss-3 .select2-selection--single {
 3 |   @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;
 4 | }
 5 | 
 6 | /* Rendered text */
 7 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered {
 8 |   @apply block pl-0 pr-0 text-gray-900 truncate dark:text-white;
 9 | }
10 | 
11 | /* Placeholder */
12 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder {
13 |   @apply text-gray-400 dark:text-gray-500;
14 | }
15 | 
16 | /* Arrow container */
17 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow {
18 |   @apply absolute inset-y-0 right-0 flex items-center pr-2;
19 | }
20 | 
21 | /* Arrow */
22 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__arrow b {
23 |   @apply w-5 h-5 text-gray-400 bg-center bg-no-repeat bg-contain;
24 |   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");
25 | }
26 | 
27 | /* Disabled state */
28 | .select2-container--tailwindcss-3.select2-container--disabled .select2-selection--single {
29 |   @apply text-gray-500 cursor-not-allowed bg-gray-50 border-gray-200 dark:bg-white/20 dark:border-white/5;
30 | }
31 | 
32 | .select2-container--tailwindcss-3.select2-container--disabled.select2-container--focus .select2-selection--single {
33 |   @apply ring-0 border-gray-200 dark:border-white/5;
34 | }
35 | 
36 | /* Clear button */
37 | .select2-container--tailwindcss-3 .select2-selection--single .select2-selection__clear {
38 |   @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;
39 | }
40 | 
41 | /* Focus styles for keyboard navigation */
42 | .select2-container--tailwindcss-3.select2-container--focus .select2-selection--single {
43 |   @apply ring-1 ring-indigo-600 border-indigo-600 outline-none;
44 | }
45 | 
46 | /* RTL Support */
47 | .select2-container--tailwindcss-3[dir="rtl"] .select2-selection--single .select2-selection__rendered {
48 |   @apply pl-10 pr-3;
49 | }


--------------------------------------------------------------------------------
/src/select2-tailwindcss-theme.scss:
--------------------------------------------------------------------------------
1 | @use "layout";
2 | @use "single";
3 | @use "multiple";


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   // The selector strategy replaced the class strategy in Tailwind CSS v3.4.1.
 4 |   darkMode: 'selector',
 5 |   content: [
 6 |     './**/*.html',
 7 |   ],
 8 |   theme: {
 9 |     extend: {},
10 |   },
11 |   plugins: [],
12 | }


--------------------------------------------------------------------------------