Menu Close

Tailwind CSS style for Select2

As per August 2022 I have been updating the package with Tailwind CSS version 3.1.8 and I have added Dark mode. See the GitHub link for the latest release.

For my cryptomonitor website I needed some selectboxes with a search option to filter all the crypto coins. Using the standard <select> </select> html element does not provide a search functionality. Therefore I used the Select2 plugin based on javascript and jQuery. There was however one issue and that is that this plugin comes with a Bootstrap style sheet and my site is fully based on Tailwind CSS style.

So I decided to make my own style file and replace the package style.css with my own based on Tailwind CSS. I created an example project in Github where you can download the style.css file but you can also pull the complete project and run a quick local webserver to test and experiment with the example select option box with search.

See here: https://github.com/Xibel/select2-tailwindcs

Small difference between the two styles. On the left the original with Bootstrap integrated and on the right my implementation with Tailwind CSS:

Dark mode

The example project on GitHub is switching between Normal and Dark mode by the setting on your local computer. Example of the implemented dark mode:

Difference between the normal and the dark mode by switching theme in your OS

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *