Select2 js custom CSS-CodePudding

I have problem on changin the Select2 Style. now currently i am using Tailwind CSS. but the Select2 css will override it and make it different than other element, how to customize this?, thank you

HTML :

<link stylesheet tailwind here>
<link stylesheet select2 here>

<select  name="state">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

Javascript:

$(document).ready(function() {
    $('.js-example-basic-single').select2();
});

already swap the css position, but the result are same

CodePudding user response：

You Need to change order of link tag css file Like this :

<!-- from this -->
<link rel="stylesheet" href="tailwind.css">
<link rel="stylesheet" href="select2.css">
<!-- to this -->
<link rel="stylesheet" href="select2.css">
<link rel="stylesheet" href="tailwind.css">

CodePudding user response：

create tailwind.config.js file in root of your project then put this code in it:

module.exports = {
  important: true,
}

this important option lets you control whether or not Tailwind’s utilities should be marked with !important.