Tailwind CSS style

Select2 comes with CSS files and has a bootstrap theme.
How can I make it work with Tailwind Utility First CSS stylesheet in a way that I could use the classnames of Tailwind? Is there anyone who has an example with Tailwind styling?

You cannot alter the CSS class names assigned to the DOM elements in the Select2 widget.

You can try googling for a Tailwind theme for Select2, but if you don’t find one you’ll have to create it yourself (assuming you have access to the Tailwind CSS and can duplicate the styling you need in a Select2 compatible stylesheet. You should be able to base your custom stylesheet off the ones that come with Select2. You might need to look at their source code in the Select2 GitHub repo.

Thanks for your reply.

I am already underway of making a Tailwind CSS stylesheet. With the @apply directive you can replace the CSS properties with Tailwind classes. I am about half way done.

Hi, Xibel. I’m glad you found a solution for your issue. I’m not familiar with @apply. Is that a Tailwind feature, or something new in CSS?

Hi John,

@apply is a Tailwind Utility. It is used to extract repeated utility patterns. Let’s assume you use the following utility classes for a label:

class="text-sm text-blue-300 text-bold"

If you use this label setup on every page a few times you could understand you are duplicating the same setup over and over. The problem arrives when you decide you want to change your labels. Let’s assume you want to change the text color to a more darker blue. You would need to replace all labels with text-blue-600. You could use ‘find and replace’ but it is nicer to create a custom own class like ‘mylabel’. you create a custom.css and put in:

.mylabel {
  @apply text-sm text-blue-300 text-bold;
}

Now you can use class=“mylabel” on every label and all the classes from mylabel are applied.

I use this technique to replace all Select2 styling with Tailwind classes. Here is an example where I replace the dropdown CSS style:

.select2-dropdown {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1051; }

with:

.select2-dropdown {
  @apply absolute block w-auto box-border bg-white border-solid border-2 border-gray-600 z-50 float-left;
  }

The result is exactly the same in the final compiled css file.

I have completely transformed the select2.css to a Tailwind style for the single setup only. It looks great!

Here is an example of Select2 with Tailwind style applied on my website:

1 Like

That’s awesome! Thanks for the explainer about Tailwind. I haven’t used it before but I will check it out.

Good luck with the rest of your project!