Tailwind CSS style

How Do I...
#1

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?

#2

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.

#3

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.

#4

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?

#5

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:

tailwind_example
tailwind_example493×510 35 KB

2 Likes
#6

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!

#7

Hi @Xibel,

Thanks too for the writeup of how to use @apply to get Select2 styled in a Tailwind CSS app; any chance I can peek at your css code?

-Bob
[email protected]

#8

Hi Bob, yes of course you can. Shall I make a GitHub Repo with the CSS style?

Greetings,

Xibel

#9

@Xibel - yes please!

#10

Hi Xibel! Do you have that css code accesible?

Best regards!

#11

Hey Bob and WoPr, it took a little while but I put up an example project at GitHub. The style.css example is there in the /src/css folder. If you need more context and an implementation example then follow the instructions in the readme.

See https://github.com/Xibel/select2-tailwindcss

Kind regards!

2 Likes
#12

Hi,

I check your code, and one doubt… is there any special reason you code is between @import 'tailwindcss/components' and @import 'tailwindcss/utilities'?

#13

Hi,

I didn’t noticed this. And no there is no special reason why. I pasted my final code in the style.css and probably did not see where I pasted this code. The best way of using this code it to place it in a separate style sheet away from the basic tailwind imports. That is how I normally do this. But this was just a very tiny stand alone working example for ppl that do want a working example locally.

Thanks for your interest.

Regards, Xibel

#14

Thanks for sharing! I’ll give a try.

#15

Hi,
I think you did a great job!
In view of official recommendation, it is more appropriate to put the third-party components in this position, because you can still use utility classes to override them when necessary.
Thank you for your selfless dedication.

1 Like