I transformed the Tom-Select base css style file for tailwind. (Symfony integration) #693

LeZellus · 2024-02-08T04:10:37Z

LeZellus
Feb 8, 2024

Hello,

For customization purposes, I got to the point where I rewrote most of the base style file in tailwind.

Of course I haven't tested it under all conditions but it should be functional for most uses.

Also, some values have been transformed by values known to tailwind.

I added some comments to modify the colors for example.

I work with Symfony 7, this involves having to create a style file in the assets and pass the
tom-select.default.css to false.

I'm aware that this will prevent possible updates, but if the need arises I will make updates.

What can i got :

📷 : https://imgur.com/a/3iaslRz
📹 : https://imgur.com/a/6rgtRIA

The code : https://pastebin.com/YfQSq30P

.ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
  @apply visible border-none;
}
 
.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
  content: "!";
  visibility: hidden;
}
 
.plugin-checkbox_options .option input {
  margin-right: 0.5rem;
}
 
.plugin-clear_button .clear-button {
  @apply opacity-0 absolute top-1/2 transform -translate-y-1/2 right-0 cursor-pointer;
}
 
.plugin-clear_button.single .clear-button {
  @apply right-2;
}
 
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:hover.has-items .clear-button {
  @apply opacity-100;
}
 
.ts-wrapper .dropdown-header {
  @apply relative p-2.5 rounded-t;
  border-bottom: 20px solid #d0d0d0;
  background: #f8f8f8;
}
 
.ts-wrapper .dropdown-header-close {
  @apply absolute right-2 top-1/2 opacity-40 -m-3 leading-5 text-xl;
}
 
.ts-wrapper .dropdown-header-close:hover {
  @apply text-black;
}
 
.plugin-dropdown_input .dropdown-input {
  @apply block p-2 shadow-none w-full bg-transparent;
}
 
.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  @apply min-w-0;
}
 
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  @apply flex;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-webkit-input-placeholder {
  @apply text-transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
  @apply text-transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  @apply text-transparent;
}
 
.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  @apply flex;
}
 
.ts-dropdown.plugin-optgroup_columns .optgroup {
  @apply flex-grow border-t-0 border-r border-gray-100 basis-0 min-w-0;
}
 
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  @apply border-r-0;
}
 
.ts-dropdown.plugin-optgroup_columns .optgroup:before {
  @apply hidden;
}
 
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  @apply border-t-0;
}
 
.ts-wrapper.plugin-remove_button .item {
  @apply inline-flex items-center pr-0;
}
 
.ts-wrapper.plugin-remove_button .item .remove {
  @apply text-inherit no-underline align-middle inline-block p-0 border-l border-gray-300 rounded-r-sm box-border ml-1.5;
}
 
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
 
.ts-wrapper.plugin-remove_button .item.active .remove {
  border-left-color: #cacaca;
}
 
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
 
.ts-wrapper.plugin-remove_button.disabled .item .remove {
  border-left-color: white;
}
 
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}
 
.ts-wrapper {
  position: relative;
}
 
.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}
 
/* Color for input */
.ts-control,
.ts-wrapper.single.input-active .ts-control {
  @apply bg-gray-100 dark:bg-gray-900; // <----------------------- Change this colors
  cursor: text;
}
 
.ts-control {
  @apply border border-gray-300 dark:border-gray-600 p-2.5 w-full overflow-hidden relative z-10 box-border shadow-none rounded-md flex flex-wrap; // <----------------------- Change this colors (input border)
}
 
.ts-wrapper.multi.has-items .ts-control {
  padding: 6px 8px 3px;
}
 
.full .ts-control {
  @apply bg-gray-100 dark:bg-gray-900 dark:text-gray-100;  // <----------------------- Change this colors (filled input)
}
 
.disabled .ts-control, .disabled .ts-control * {
  @apply cursor-pointer;
}
 
.focus .ts-control {
  @apply shadow-none;
}
 
.ts-control > * {
  @apply align-baseline inline-block;
}
 
.ts-wrapper.multi .ts-control > div {
  @apply cursor-pointer m-0 mx-1 my-1 p-1 px-1.5 bg-gray-200 text-gray-800 border-0;
}
 
.ts-wrapper.multi .ts-control > div.active {
  @apply bg-gray-300 text-gray-800 border-0;
}
 
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  @apply text-gray-400 bg-white border-0;
}
 
.ts-control > input {
  @apply inline-block p-0 min-h-0 max-w-full m-0 indent-0 border-0 bg-transparent flex-grow select-auto  placeholder-gray-300 dark:placeholder-gray-600;
  min-width: 7rem;
  max-height: none !important;
  box-shadow: none !important;
}
 
.ts-control > input::-ms-clear {
  @apply hidden;
}
 
.ts-control > input:focus {
  @apply outline-0;
}
 
.has-items .ts-control > input {
  @apply m-0 mx-1;
  margin: 0 4px !important;
}
 
.ts-control.rtl {
  @apply text-right;
}
 
.ts-control.rtl.single .ts-control:after {
  @apply absolute right-auto;
  content: '';
  left: 15px;
}
 
.ts-control.rtl .ts-control > input {
  @apply m-0 mx-1;
  margin: 0 4px 0 -2px !important;
}
 
.disabled .ts-control {
  @apply opacity-50 bg-gray-100;
}
 
.input-hidden .ts-control > input {
  @apply opacity-0 absolute;
  left: -10000px;
}
 
.ts-dropdown {
  @apply absolute top-full left-0 w-full z-10 border border-gray-300 dark:border-gray-600 bg-white mt-1 box-border rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-900; // <----------------------- Change this colors (nav items)
}
 
.ts-dropdown [data-selectable] {
  @apply cursor-pointer overflow-hidden;
}
 
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
 
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
 
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
 
.ts-dropdown [data-selectable].option {
  @apply opacity-100 cursor-pointer dark:text-gray-100 p-2.5; // <----------------------- Change this colors (item list text)
}
 
.ts-dropdown .optgroup:first-child .optgroup-header {
  @apply border-t-0;
}
 
.ts-dropdown .optgroup-header {
  @apply cursor-default bg-white;
  color: #303030;
}
 
/* Color for item list hover */
.ts-dropdown .create:hover,
.ts-dropdown .option:hover,
.ts-dropdown .active {
  @apply bg-gray-300 dark:bg-gray-800 dark:text-gray-100; // <----------------------- Change this colors
}
 
.ts-dropdown .create:hover.create,
.ts-dropdown .option:hover.create,
.ts-dropdown .active.create {
  color: #495c68;
}
 
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
 
.ts-dropdown .spinner {
  @apply inline-block w-7 h-7 m-1 mx-2;
}
 
.ts-dropdown .spinner:after {
  @apply block w-6 h-6 m-1 rounded-full border-4 border-gray-300;
  content: " ";
  border-color: #FF7828 transparent #FF7828 transparent; // <----------------------- Change this colors (spinner)
  animation: lds-dual-ring 1.2s linear infinite;
}
 
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
 
.ts-dropdown-content {
  @apply overflow-y-auto overflow-x-hidden max-h-[200px];
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
 
.ts-hidden-accessible {
  @apply border-0 h-0.5 overflow-hidden p-0 absolute w-0.5 whitespace-nowrap;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

NB : No values have been deleted except the obsolete ones. Values that did not have a tailwind equivalent remained as is.

Hope this can help some.

Sorry for my poor English

Enjoy 🚀

BernardoSousa · 2024-04-08T21:58:31Z

BernardoSousa
Apr 8, 2024

Exactly what i was looking for, thank you!

0 replies

vtuz · 2024-04-21T18:55:14Z

vtuz
Apr 21, 2024

Thanks a lot!

0 replies

sovetski · 2024-04-24T17:50:13Z

sovetski
Apr 24, 2024

Thank you, I hope that it will be implemented by default like Bootstrap 4 and 5.

Your link can expire in the future, that is why it is a good practice to put your code here directly.

I am doing that for you, if you edit your original discussion, I can remove it, let me know 😉

The original code is here

.ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
  @apply visible border-none;
}
 
.ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
  content: "!";
  visibility: hidden;
}
 
.plugin-checkbox_options .option input {
  margin-right: 0.5rem;
}
 
.plugin-clear_button .clear-button {
  @apply opacity-0 absolute top-1/2 transform -translate-y-1/2 right-0 cursor-pointer;
}
 
.plugin-clear_button.single .clear-button {
  @apply right-2;
}
 
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:hover.has-items .clear-button {
  @apply opacity-100;
}
 
.ts-wrapper .dropdown-header {
  @apply relative p-2.5 rounded-t;
  border-bottom: 20px solid #d0d0d0;
  background: #f8f8f8;
}
 
.ts-wrapper .dropdown-header-close {
  @apply absolute right-2 top-1/2 opacity-40 -m-3 leading-5 text-xl;
}
 
.ts-wrapper .dropdown-header-close:hover {
  @apply text-black;
}
 
.plugin-dropdown_input .dropdown-input {
  @apply block p-2 shadow-none w-full bg-transparent;
}
 
.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  @apply min-w-0;
}
 
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  @apply flex;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-webkit-input-placeholder {
  @apply text-transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
  @apply text-transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  @apply text-transparent;
}
 
.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  @apply flex;
}
 
.ts-dropdown.plugin-optgroup_columns .optgroup {
  @apply flex-grow border-t-0 border-r border-gray-100 basis-0 min-w-0;
}
 
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  @apply border-r-0;
}
 
.ts-dropdown.plugin-optgroup_columns .optgroup:before {
  @apply hidden;
}
 
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  @apply border-t-0;
}
 
.ts-wrapper.plugin-remove_button .item {
  @apply inline-flex items-center pr-0;
}
 
.ts-wrapper.plugin-remove_button .item .remove {
  @apply text-inherit no-underline align-middle inline-block p-0 border-l border-gray-300 rounded-r-sm box-border ml-1.5;
}
 
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
 
.ts-wrapper.plugin-remove_button .item.active .remove {
  border-left-color: #cacaca;
}
 
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
 
.ts-wrapper.plugin-remove_button.disabled .item .remove {
  border-left-color: white;
}
 
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}
 
.ts-wrapper {
  position: relative;
}
 
.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}
 
/* Color for input */
.ts-control,
.ts-wrapper.single.input-active .ts-control {
  @apply bg-gray-100 dark:bg-gray-900; // <----------------------- Change this colors
  cursor: text;
}
 
.ts-control {
  @apply border border-gray-300 dark:border-gray-600 p-2.5 w-full overflow-hidden relative z-10 box-border shadow-none rounded-md flex flex-wrap; // <----------------------- Change this colors (input border)
}
 
.ts-wrapper.multi.has-items .ts-control {
  padding: 6px 8px 3px;
}
 
.full .ts-control {
  @apply bg-gray-100 dark:bg-gray-900 dark:text-gray-100;  // <----------------------- Change this colors (filled input)
}
 
.disabled .ts-control, .disabled .ts-control * {
  @apply cursor-pointer;
}
 
.focus .ts-control {
  @apply shadow-none;
}
 
.ts-control > * {
  @apply align-baseline inline-block;
}
 
.ts-wrapper.multi .ts-control > div {
  @apply cursor-pointer m-0 mx-1 my-1 p-1 px-1.5 bg-gray-200 text-gray-800 border-0;
}
 
.ts-wrapper.multi .ts-control > div.active {
  @apply bg-gray-300 text-gray-800 border-0;
}
 
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  @apply text-gray-400 bg-white border-0;
}
 
.ts-control > input {
  @apply inline-block p-0 min-h-0 max-w-full m-0 indent-0 border-0 bg-transparent flex-grow select-auto  placeholder-gray-300 dark:placeholder-gray-600;
  min-width: 7rem;
  max-height: none !important;
  box-shadow: none !important;
}
 
.ts-control > input::-ms-clear {
  @apply hidden;
}
 
.ts-control > input:focus {
  @apply outline-0;
}
 
.has-items .ts-control > input {
  @apply m-0 mx-1;
  margin: 0 4px !important;
}
 
.ts-control.rtl {
  @apply text-right;
}
 
.ts-control.rtl.single .ts-control:after {
  @apply absolute right-auto;
  content: '';
  left: 15px;
}
 
.ts-control.rtl .ts-control > input {
  @apply m-0 mx-1;
  margin: 0 4px 0 -2px !important;
}
 
.disabled .ts-control {
  @apply opacity-50 bg-gray-100;
}
 
.input-hidden .ts-control > input {
  @apply opacity-0 absolute;
  left: -10000px;
}
 
.ts-dropdown {
  @apply absolute top-full left-0 w-full z-10 border border-gray-300 dark:border-gray-600 bg-white mt-1 box-border rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-900; // <----------------------- Change this colors (nav items)
}
 
.ts-dropdown [data-selectable] {
  @apply cursor-pointer overflow-hidden;
}
 
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
 
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
 
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
 
.ts-dropdown [data-selectable].option {
  @apply opacity-100 cursor-pointer dark:text-gray-100 p-2.5; // <----------------------- Change this colors (item list text)
}
 
.ts-dropdown .optgroup:first-child .optgroup-header {
  @apply border-t-0;
}
 
.ts-dropdown .optgroup-header {
  @apply cursor-default bg-white;
  color: #303030;
}
 
/* Color for item list hover */
.ts-dropdown .create:hover,
.ts-dropdown .option:hover,
.ts-dropdown .active {
  @apply bg-gray-300 dark:bg-gray-800 dark:text-gray-100; // <----------------------- Change this colors
}
 
.ts-dropdown .create:hover.create,
.ts-dropdown .option:hover.create,
.ts-dropdown .active.create {
  color: #495c68;
}
 
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
 
.ts-dropdown .spinner {
  @apply inline-block w-7 h-7 m-1 mx-2;
}
 
.ts-dropdown .spinner:after {
  @apply block w-6 h-6 m-1 rounded-full border-4 border-gray-300;
  content: " ";
  border-color: #FF7828 transparent #FF7828 transparent; // <----------------------- Change this colors (spinner)
  animation: lds-dual-ring 1.2s linear infinite;
}
 
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
 
.ts-dropdown-content {
  @apply overflow-y-auto overflow-x-hidden max-h-[200px];
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
 
.ts-hidden-accessible {
  @apply border-0 h-0.5 overflow-hidden p-0 absolute w-0.5 whitespace-nowrap;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}

1 reply

LeZellus Apr 30, 2024
Author

I was careful to put a link that does not expire. But I added it anyway!

julian-koster · 2024-08-21T07:18:23Z

julian-koster
Aug 21, 2024

My man, you saved me countless hours, thank you!

0 replies

tmw-mm · 2024-09-04T10:24:58Z

tmw-mm
Sep 4, 2024

Amazing, thanks so much! In case it's helpful for anyone, I added this override for the selected items in multi-select controls:

.ts-wrapper.multi .ts-control > div.item { @apply bg-gray-300; background-image: none; }

0 replies

pldavid2 · 2025-07-29T16:16:21Z

pldavid2
Jul 29, 2025

Thanks @LeZellus for this!
Do you have this working also for tailwind 4 ?

0 replies

Uh oh!

I transformed the Tom-Select base css style file for tailwind. (Symfony integration) #693

Uh oh!

Uh oh!

LeZellus Feb 8, 2024

Replies: 6 comments · 1 reply

Uh oh!

BernardoSousa Apr 8, 2024

Uh oh!

vtuz Apr 21, 2024

Uh oh!

Uh oh!

sovetski Apr 24, 2024

Uh oh!

LeZellus Apr 30, 2024 Author

Uh oh!

julian-koster Aug 21, 2024

Uh oh!

tmw-mm Sep 4, 2024

Uh oh!

pldavid2 Jul 29, 2025

LeZellus
Feb 8, 2024

Replies: 6 comments 1 reply

BernardoSousa
Apr 8, 2024

vtuz
Apr 21, 2024

sovetski
Apr 24, 2024

LeZellus Apr 30, 2024
Author

julian-koster
Aug 21, 2024

tmw-mm
Sep 4, 2024

pldavid2
Jul 29, 2025