select2-tailwindcss-theme

Select2 v4 theme for TailwindCSS v3.4, inspired by select2-bootstrap4-theme

Live demo

https://erimicel.github.io/select2-tailwindcss-theme/

📦 Installation

CDN

<!-- Latest -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/erimicel/select2-tailwindcss-theme/dist/select2-tailwindcss-theme-plain.min.css">

<!-- Different version change (x.x.x) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/erimicel/select2-tailwindcss-theme@x.x.x/dist/select2-tailwindcss-theme-plain.min.css">

Install the package and ensure you have TailwindCSS installed in your project:

# npm
$ npm install select2-tailwindcss-theme

# yarn
$ yarn add select2-tailwindcss-theme

Usage

import 'select2-tailwindcss-theme/dist/select2-tailwindcss-theme.css'; // Regular version
// OR
import 'select2-tailwindcss-theme/dist/select2-tailwindcss-theme.min.css'; // Minified version

$('select').select2({
  theme: 'tailwindcss-3',
});

With tailwindcss config

Update your Tailwind configuration to include the package in the content array:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js}',
    './node_modules/select2-tailwindcss-theme/dist/*.css', // Include the package
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Development

git clone https://github.com/erimicel/select2-tailwindcss-theme.git
cd select2-tailwindcss-theme
npm install

Modify the SCSS file in src/.scss. Build the CSS:

npm run build:all   # Build all files and update demo as-well

Contributing

Contributions, issues, and feature requests are welcome! Fork the repository, create a new branch, commit your changes, push to your branch, and open a pull request:

git checkout -b feature-branch-name
git commit -m 'Add some feature'
git push origin feature-branch-name

If you find this package helpful, please ⭐ the repository on GitHub!