Tailwind Help

[paulodeon]

For those trying to get a Tailwind theme/styles applied this might help. This is how I got it looking:

In Webpack or webpacker import tom select and plugins:

import TomSelect from 'tom-select/dist/esm/tom-select';
import 'tom-select/dist/esm/plugins/remove_button/plugin';
import 'tom-select/dist/css/tom-select';
import 'stylesheets/tom-select';

Then in your custom stylesheet file (stylesheets/tom-select) apply the tailwind classes you need to the selectors

.ts-control {
  @apply border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 rounded-lg gap-2
}

.ts-wrapper.plugin-remove_button .item {
  @apply rounded-md
}
.ts-wrapper.multi .ts-control > div {
  @apply p-0 m-0 pl-1
}

.ts-wrapper.plugin-remove_button .item .remove {
  @apply border-none text-lg leading-none py-1 rounded-r-lg
}

.ts-dropdown {
  @apply rounded-md border border-solid border-t border-gray-300
}

.ts-dropdown [data-selectable].option:first-child {
  @apply rounded-t-md
}

.ts-dropdown [data-selectable].option:last-child {
  @apply rounded-b-md
}
.ts-dropdown .create:hover, .ts-dropdown .option:hover, .ts-dropdown .active {
  @apply bg-indigo-100 text-indigo-900
}

The full list of classes is here: https://github.com/orchidjs/tom-select/blob/master/dist/css/tom-select.css but that got me as far as I needed.

[bendo01]

hi, first of all thank you for this, how to apply tailwind dark mode?

[jbbonin]

Link is broken
Full list available through cdn : https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css

[piclez]

I can't get this to work on my Rails 6 + Tailwind App!

[steveclarke]

Here's what I came up with for my Rails 7 + Tailwind app:

@import "../../../../node_modules/tom-select/dist/css/tom-select.css";

.ts-wrapper {
  @apply w-full !ml-0;
}

.ts-control {
  @apply
    shadow-sm
    rounded-lg
    border-gray-300
    bg-white
    py-2
    px-3
    text-base;

    /* Add caret https://github.com/orchidjs/tom-select/discussions/384 */
    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");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

.ts-dropdown {
  @apply rounded-md border border-solid border-t border-gray-300 text-base;
}

.ts-dropdown [data-selectable].option:first-child {
  @apply rounded-t-lg;
}

.ts-dropdown [data-selectable].option:last-child {
  @apply rounded-b-lg;
}

.ts-dropdown .create:hover, .ts-dropdown .option:hover{
  @apply bg-sky-50 text-sky-900;
}

.ts-dropdown .active {
  @apply bg-gray-100 text-gray-900;
}

And it looks like this:

[raliqala]

Laravel livewire and tailwind (Light and Dark mode)
I came up with this:

.ts-control {
    @apply !p-2.5;
}

.ts-wrapper:focus {
    @apply rounded;
}

.ts-dropdown-content:focus {
    @apply shadow-xl;
}

.ts-wrapper.plugin-remove_button .item {
    @apply rounded-md;
}
.ts-wrapper.multi .ts-control > div {
    @apply p-0 m-0 pl-1;
}

.ts-wrapper.plugin-remove_button .item .remove {
    @apply border-none text-lg leading-none py-1 rounded-r-lg;
}

.ts-dropdown {
    @apply rounded-md border border-solid border-t border-gray-300 dark:border-gray-600 shadow-xl;
}

.ts-dropdown [data-selectable].option:first-child {
    @apply rounded-t-md;
}

.ts-dropdown [data-selectable].option:last-child {
    @apply rounded-b-md;
}
.ts-dropdown .create:hover,
.ts-dropdown .option:hover,
.ts-dropdown .active {
    @apply bg-blue-600 text-white dark:text-white;
}

.ts-wrapper .option .title {
    display: block;
}
.ts-wrapper .option .url {
    font-size: 12px;
    display: block;
    color: #a0a0a0;
}

.ts-dropdown-content {
    @apply bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white;
}

.customDropDown {
    @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white cursor-default;
}

.ts-dropdown-content {
    @apply border-gray-300 dark:border-gray-600;
    border-radius: inherit;
}

.ts-wrapper.single .ts-control, .ts-dropdown.single {
    border-radius: 8px !important;
    @apply dark:bg-gray-700 dark:border-gray-600 bg-gray-50 border-gray-300 !important;
}

.item {
    @apply text-gray-900 dark:text-white;
}

.ts-wrapper.single .ts-control {
    box-shadow: none !important;
    background-image: none !important;
}

[LeZellus]

You can see something I've done on this subject : #693