### Development Setup

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/README.md

Clone the repository and install dependencies to set up the development environment. Modify SCSS files and build the CSS.

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

--------------------------------

### Development Setup for Select2 Tailwind CSS Theme

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/INDEX.md

Clone the repository, install dependencies, and build the project for development. Ensure you have Node.js and npm installed.

```bash
git clone https://github.com/erimicel/select2-tailwindcss-theme.git
cd select2-tailwindcss-theme
npm install
npm run build:all
```

--------------------------------

### NPM/Yarn Installation

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/README.md

Install the package using npm or yarn. Ensure TailwindCSS is already set up in your project.

```bash
# npm
$ npm install select2-tailwindcss-theme

# yarn
$ yarn add select2-tailwindcss-theme
```

--------------------------------

### HTML Examples for Select States and Layouts

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/README.md

Demonstrates how to apply validation states, input groups, and RTL direction using specific HTML classes and attributes.

```html
<!-- Validation / error state: add .is-invalid to the <select> (or use :invalid / Rails .field_with_errors) -->
<select class="is-invalid"> ... </select>

<!-- Input group: wrap a flex row with .input-group -->
<div class="flex input-group">
  <span> ... </span>
  <select> ... </select>
</div>

<!-- RTL: set dir="rtl" on the select -->
<select dir="rtl"> ... </select>
```

--------------------------------

### Install Sass Watch for Automatic Rebuilds

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Install the sass-watch package as a development dependency.

```bash
npm install --save-dev sass-watch
```

--------------------------------

### Start Sass Watch and PostCSS Watch

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Use sass-watch to monitor SCSS changes and rebuild CSS, and PostCSS watch for minification.

```bash
npx sass --watch src:dist --style=compressed
```

```bash
npx postcss dist/select2-tailwindcss-theme.css \
  -w -o dist/select2-tailwindcss-theme.min.css
```

--------------------------------

### Install Sass

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Use this command if the 'sass: command not found' error occurs. It installs Sass as a development dependency.

```bash
npm install sass
```

--------------------------------

### Set PostCSS Environment Variables

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Check that the necessary environment variables are set correctly to ensure PostCSS plugins run as expected. Examples include `MINIFY` and `VERBOSE`.

```bash
MINIFY=true VERBOSE=true npm run build
```

--------------------------------

### Install select2-tailwindcss-theme with Yarn

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/overview.md

Use Yarn to add the select2-tailwindcss-theme package to your project dependencies.

```bash
yarn add select2-tailwindcss-theme
```

--------------------------------

### Install select2-tailwindcss-theme with NPM

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/overview.md

Use NPM to add the select2-tailwindcss-theme package to your project dependencies.

```bash
npm install select2-tailwindcss-theme
```

--------------------------------

### CDN Installation for Select2 TailwindCSS Theme

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/README.md

Include this stylesheet link in your HTML for standalone usage. For specific versions, replace 'x.x.x' with the desired version number.

```html
<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"
/>
```

--------------------------------

### Organize SCSS with Comment Headers

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Employ SCSS comment headers to logically group related CSS rules, improving code readability and maintainability. This example shows comments for base container and dropdown styles.

```scss
/* Base container */
.select2-container--tailwindcss-3 {
  ... 
}

/* Dropdown */
.select2-container--tailwindcss-3.select2-container--open .select2-dropdown {
  ... 
}
```

--------------------------------

### CSS Specificity for Overriding Styles

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

When overriding styles, use CSS selectors with appropriate specificity to ensure your custom styles take precedence. The example demonstrates matching the theme's selector specificity for reliable overrides.

```css
/* Good: Matches theme selector specificity */
.select2-container--tailwindcss-3 .select2-selection {
  @apply ring-blue-600 !important;
}

/* Less reliable: Lower specificity */
.select2-selection {
  border: 2px solid blue;
}
```

--------------------------------

### Update Live Demo Files

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Copies the minified theme CSS to the demo directory and recompiles the demo's Tailwind CSS with minification. This command updates the live demo site.

```bash
cp ./dist/select2-tailwindcss-theme-plain.min.css ./docs/css/ && \
npx tailwindcss \
  -i ./docs/tailwind.css \
  -o ./docs/css/tailwind.css \
  --minify
```

--------------------------------

### Update Demo CSS Files

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/overview.md

Run this script to regenerate the CSS files used in the project's live demo.

```bash
npm run build:demo
```

--------------------------------

### Build CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/README.md

Run the build script to compile SCSS files into CSS. The `build:all` command also updates the demo.

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

--------------------------------

### Complete Build Pipeline

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Executes all individual build commands in sequence to generate all CSS variations and update demo files. This command represents the full build process.

```bash
# This command orchestrates the following:
# 1. npm run build
# 2. npm run build:min
# 3. npm run build:plain
# 4. npm run build:plain:min
# 5. npm run build:demo
# No direct command is shown, but the process is described.
```

--------------------------------

### Build All CSS Variants

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/overview.md

Execute the build script to compile SCSS, generate all CSS variants (including minified and pre-compiled versions), and update the demo files.

```bash
npm run build:all
```

--------------------------------

### Import SCSS/CSS for Tailwind Build Pipeline

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Import the theme's SCSS or CSS file into your project's build pipeline. Use the minified version for production.

```javascript
import "select2-tailwindcss-theme/dist/select2-tailwindcss-theme.css"; // Regular
// OR
import "select2-tailwindcss-theme/dist/select2-tailwindcss-theme.min.css"; // Minified
```

--------------------------------

### Import Standalone CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/README.md

Import the pre-compiled CSS file directly if you are not using a Tailwind build process.

```javascript
import "select2-tailwindcss-theme/dist/select2-tailwindcss-theme-plain.min.css";
```

--------------------------------

### Customize Build with Different Tailwind Config

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Temporarily swap the Tailwind configuration file to build with custom settings, then restore the original.

```bash
# Temporarily swap config
cp tailwind.config.js tailwind.config.js.bak
cp tailwind.config.custom.js tailwind.config.js

# Build
npm run build:plain

# Restore
mv tailwind.config.js.bak tailwind.config.js
```

--------------------------------

### Build Plain CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Use these build commands when '@apply' directives are not expanded in the output. They generate CSS without Tailwind's processing.

```bash
npm run build:plain
```

```bash
npm run build:plain:min
```

--------------------------------

### Include Select2 Library

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Ensure the Select2 library's CSS and JavaScript files are loaded before initializing the theme.

```html
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
```

--------------------------------

### Select2 TailwindCSS Theme SCSS Entry Point

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

The main SCSS file imports other partials to organize styles. Uses the SCSS module system with `@use`.

```scss
@use "layout";
@use "single";
@use "multiple";
```

--------------------------------

### Style Pseudo-elements and Pseudo-classes

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Demonstrates styling for pseudo-elements like '::after' and pseudo-classes like ':hover'. This includes setting custom background images and applying utility classes on hover states.

```scss
.select2-selection__arrow b {
  background-image: url("data:..."); /* Custom SVG */
}

.select2-selection__choice__remove {
  &:hover { /* Pseudo-class */
    @apply bg-blue-200;
  }
}

.select2-results__option--selected::after {
  content: "✓"; /* Pseudo-element with content */
}
```

--------------------------------

### PostCSS Configuration

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Configures the PostCSS pipeline, including autoprefixer, Tailwind CSS, and cssnano. Conditional processing is based on environment variables.

```javascript
const cssnano = require("cssnano")({ preset: "default" });
const tailwindcss = require("tailwindcss");

module.exports = {
  plugins: [
    require("autoprefixer"),
    ...(process.env.VERBOSE === "true" ? [tailwindcss] : []),
    ...(process.env.MINIFY === "true" ? [cssnano] : []),
  ],
};

```

--------------------------------

### Include Select2 Tailwind Theme via CDN

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Link to the pre-compiled CSS file directly from a CDN for quick integration without a build step.

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

--------------------------------

### Link Standalone CSS from Node Modules

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Reference the pre-compiled CSS file from the node_modules directory in your HTML.

```html
<link 
  rel="stylesheet" 
  href="node_modules/select2-tailwindcss-theme/dist/select2-tailwindcss-theme-plain.min.css"
/>
```

--------------------------------

### Pre-compiled CSS with Expanded Directives

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

This CSS file has all `@apply` directives expanded into their corresponding Tailwind utility classes. It is fully standalone and does not require any Tailwind build process. Use this for standalone projects or when delivering via CDN.

```css
/* Before (@apply) */
.select2-results__option--selected {
  @apply font-semibold dark:text-white;
}

/* After (plain.css) */
.select2-results__option--selected {
  font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .select2-results__option--selected {
    color: #fff;
  }
}
```

--------------------------------

### NPM Package Files Configuration

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Specifies which files and directories are included when the package is published to NPM. This ensures only necessary assets are distributed.

```json
{
  "files": [
    "dist/",
    "src/",
    "LICENSE",
    "README.md"
  ]
}
```

--------------------------------

### Compile SCSS to CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Compiles the main SCSS file into a minified CSS file without generating source maps. This is the initial step in the build process.

```bash
sass --style=compressed \
  src/select2-tailwindcss-theme.scss \
  dist/select2-tailwindcss-theme.css \
  --no-source-map
```

--------------------------------

### Initialize Select2 with TailwindCSS Theme

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/README.md

Use this JavaScript snippet to initialize Select2 with the 'tailwindcss-3' theme. This requires the theme's CSS to be included.

```javascript
$("select").select2({
  theme: "tailwindcss-3",
});
```

--------------------------------

### Generate Minified Pre-compiled CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Generates a minified, pre-compiled CSS file by processing the original SCSS output through Tailwind and PostCSS with both autoprefixer and cssnano. This is the file used by CDN.

```bash
MINIFY=true VERBOSE=true npx postcss \
  dist/select2-tailwindcss-theme.css \
  -o dist/select2-tailwindcss-theme-plain.min.css \
  --verbose
```

--------------------------------

### Initialize Multiple Select2 Elements with Tailwind Theme

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Initialize Select2 with the Tailwind theme for both single and multiple select elements.

```javascript
"#single-example").select2({
  theme: "tailwindcss-3"
});

$("#multiple-example").select2({
  theme: "tailwindcss-3"
});
```

--------------------------------

### Select2 with Tailwind Build Pipeline

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/INDEX.md

Integrate Select2 with a Tailwind CSS build pipeline. The theme CSS file needs to be included in the Tailwind content configuration.

```javascript
import "select2/dist/css/select2.min.css";
import "select2-tailwindcss-theme/dist/select2-tailwindcss-theme.css";

// tailwind.config.js must include:
// content: ["./node_modules/select2-tailwindcss-theme/dist/*.css"]
```

--------------------------------

### Configure PostCSS to Use CSSO for Minification

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Modify the PostCSS configuration file to use 'postcss-csso' instead of 'cssnano' for minification.

```javascript
// Use csso instead of cssnano
const csso = require('postcss-csso');

module.exports = {
  plugins: [
    require("autoprefixer"),
    ...(process.env.MINIFY === "true" ? [csso] : []),
  ],
};

```

--------------------------------

### Minify CSS with PostCSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Minifies an existing CSS file using PostCSS, applying autoprefixer and conditionally cssnano. This command is used for additional compression.

```bash
MINIFY=true npx postcss \
  dist/select2-tailwindcss-theme.css \
  -o dist/select2-tailwindcss-theme.min.css \
  --verbose
```

--------------------------------

### Use Source CSS for Customization

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Import the source CSS file if you are already using Tailwind in your build process and need to customize the theme. This allows for Tailwind config-based customization.

```javascript
import "select2-tailwindcss-theme/dist/select2-tailwindcss-theme.css";
```

--------------------------------

### SCSS with @apply

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

SCSS code demonstrating the use of Tailwind's `@apply` directive for composing utility classes within a selector. This is the initial SCSS structure before compilation.

```scss
.select2-results__option {
  @apply relative py-2 pl-3 text-gray-900 transition-colors duration-150 
         ease-in-out cursor-default select-none pr-9 dark:text-white;
}
```

--------------------------------

### Create HTML Input Group with Prefix

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Combine a select element with a preceding span for a prefix using flexbox and the `.input-group` class. This ensures proper alignment and spacing.

```html
<div class="flex input-group">
  <span class="px-3 py-1.5 bg-gray-100 border border-gray-300">
    prefix
  </span>
  <select>
    <option>Select</option>
  </select>
</div>
```

--------------------------------

### Import Source CSS with Tailwind Build

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/README.md

Import the source CSS file if you are using TailwindCSS in your build process. The theme's `@apply` directives will be resolved.

```javascript
import "select2-tailwindcss-theme/dist/select2-tailwindcss-theme.css"; // Regular version
// OR
import "select2-tailwindcss-theme/dist/select2-tailwindcss-theme.min.css"; // Minified version
```

--------------------------------

### Include Specific Version of Select2 Tailwind Theme via CDN

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Link to a specific version of the pre-compiled CSS file from a CDN.

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

--------------------------------

### Tailwind CSS Responsive Styles

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/styles-and-theming.md

Demonstrates Tailwind CSS classes for applying different text sizes based on screen width. Use `sm:` prefix for styles applied at or above the small breakpoint.

```css
/* Mobile (< 640px) */
text-base;         /* 16px base */

/* Desktop (≥ 640px) */
sm:text-sm/6;      /* 14px with 24px line height */
```

--------------------------------

### Add Source Maps to Build

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Modify the build script to include source map generation during the Sass compilation.

```bash
sass src/select2-tailwindcss-theme.scss \
  dist/select2-tailwindcss-theme.css \
  --style=compressed \
  --source-map
```

--------------------------------

### Generate Pre-compiled CSS with Tailwind

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Processes the compiled CSS through Tailwind to expand all @apply directives and generate necessary utilities. This command produces a fully pre-compiled CSS file without minification.

```bash
VERBOSE=true npx tailwindcss \
  -i dist/select2-tailwindcss-theme.css \
  -o dist/select2-tailwindcss-theme-plain.css \
  --verbose
```

--------------------------------

### Single Selection Rendered Text and Placeholder Styling

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Styles the displayed selected value and the placeholder text within the single selection input. Includes truncation for long text.

```scss
/* Rendered text */
.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__rendered {
  @apply block pl-0 pr-0 text-gray-900 truncate dark:text-white;
}

/* Placeholder */
.select2-container--tailwindcss-3 .select2-selection--single .select2-selection__placeholder {
  @apply text-gray-400 dark:text-gray-500;
}
```

--------------------------------

### Configure Tailwind CSS Path

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

Ensure your `tailwind.config.js` includes the correct CSS file path in the `content` array to prevent Tailwind utilities from not matching custom configurations.

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js}",
    "./index.html",
    "./node_modules/tw-elements/dist/js/**/*.js",
    "./src/styles.css"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

--------------------------------

### Feature Branch Workflow

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/README.md

Standard Git commands for contributing: create a feature branch, commit changes, and push to your remote branch to open a pull request.

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

--------------------------------

### Basic Single Select with Tailwind Theme

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/INDEX.md

Initialize a single select dropdown with the Tailwind CSS theme. Ensure both Select2 and the theme CSS are imported.

```javascript
import "select2/dist/css/select2.min.css";
import "select2-tailwindcss-theme/dist/select2-tailwindcss-theme-plain.min.css";

$("#mySelect").select2({ theme: "tailwindcss-3" });
```

--------------------------------

### Initialize Select2 with Tailwind CSS Theme

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/docs/index.html

Initializes Select2 components on the page using the 'tailwindcss-3' theme. It dynamically sets options based on data attributes of the select elements, including width, placeholder, clearable, tags, and AJAX fetching.

```javascript
$(function () {
    // Toggle dark mode
    document .getElementById("theme-toggle") 
        .addEventListener("click", () => {
            localStorage.theme = localStorage.theme === "dark" ? "light" : "dark";
            // On page load or when changing themes, best to add inline in `head` to avoid FOUC
            document.documentElement.classList.toggle( 
                "dark", 
                localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)
            );
        });

    // Select2 init
    $("select").each(function () {
        let options = {
            theme: "tailwindcss-3", 
            width: $(this).data("width") ? $(this).data("width") : $(this).hasClass("w-full") ? "100%" : "style",
            placeholder: $(this).data("placeholder") || "Select an option",
            allowClear: Boolean($(this).data("allow-clear")),
            closeOnSelect: !$(this).attr("multiple"),
            tags: Boolean($(this).data("tags")),
        };

        if ($(this).data("fetch")) {
            options = {
                ...options,
                ajax: {
                    url: $(this).data("fetch"),
                    dataType: "json",
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term, // search term
                            page: params.page,
                        };
                    },
                    processResults: function (data, params) {
                        // parse the results into the format expected by Select2
                        // since we are using custom formatting functions we do not need to
                        // alter the remote JSON data, except to indicate that infinite 
                        // scrolling can be used
                        params.page = params.page || 1;
                        return {
                            results: data.items,
                            pagination: {
                                more: params.page * 30 < data.total_count,
                            },
                        };
                    },
                    cache: true,
                },
                minimumInputLength: 1,
                templateResult: formatRepo,
                templateSelection: formatRepoSelection,
            };
        }

        $(this).select2(options);
    });

    function formatRepo(repo) {
        if (repo.loading) {
            return repo.text;
        }

        var $container = $(
            "<div class='flex'>" +
            "<div class='text-base sm:text-sm/6 dark:text-white select2-result-repository__title'></div>" +
            "</div>"
        );

        $container.find(".select2-result-repository__title").text(repo.full_name);

        return $container;
    }

    function formatRepoSelection(repo) {
        return repo.full_name || repo.text;
    }
});
```

--------------------------------

### AJAX Remote Data Loading with TailwindCSS Theme

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Configures Select2 to load options dynamically from a remote API endpoint using AJAX. Requires `ajax` configuration with `url`, `dataType`, `data`, and `processResults`.

```javascript
$("#remote-select").select2({
  theme: "tailwindcss-3",
  ajax: {
    url: "https://api.example.com/data",
    dataType: 'json',
    delay: 250,
    data: function (params) {
      return {
        q: params.term,
        page: params.page
      };
    },
    processResults: function (data, params) {
      params.page = params.page || 1;
      return {
        results: data.items,
        pagination: {
          more: (params.page * 30) < data.total_count
        }
      };
    },
    cache: true
  },
  minimumInputLength: 1,
  placeholder: "Search items..."
});
```

--------------------------------

### Toggle Dark Mode

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/docs/index.html

Handles toggling between light and dark themes based on user interaction and local storage. It also respects the system's preferred color scheme if no theme is explicitly set.

```javascript
tailwind.config = { darkMode: "selector", }; // On page load or when changing themes, best to add inline in `head` to avoid FOUC document.documentElement.classList.toggle( "dark", localStorage.theme === "dark" );
```

--------------------------------

### Results Options Wrapper CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/css-classes-and-selectors.md

Styles the container for all option items, enabling scrolling with a maximum height. Applied to the main results container.

```css
.select2-container--tailwindcss-3 .select2-results__options
```

--------------------------------

### CSS with @apply Directives

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/build-and-compilation.md

This CSS file contains Tailwind's `@apply` directives. It requires a Tailwind CSS build pipeline to process and expand these directives into utility classes. Use this when your project already integrates with Tailwind CSS.

```css
.select2-container--tailwindcss-3 .select2-results__option--selected {
  @apply font-semibold dark:text-white;
}
```

--------------------------------

### Rebuild SCSS for Select2 Theme

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/INDEX.md

For maximum control over the Select2 Tailwind CSS theme, modify the SCSS source files and rebuild the theme using the provided npm script.

```bash
# Modify src/_single.scss or src/_multiple.scss
npm run build:all
```

--------------------------------

### Load Select2 Base CSS Before Theme CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Ensure Select2's base CSS is loaded before the theme CSS to prevent styling conflicts and ensure correct rendering. This order is crucial for proper theme application.

```javascript
import "select2/dist/css/select2.min.css"; // First
import "select2-tailwindcss-theme/dist/select2-tailwindcss-theme-plain.min.css"; // Second
```

--------------------------------

### Individual Chip CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/css-classes-and-selectors.md

Styles each individual chip representing a selected option. Applies indigo background and text colors with a rounded pill shape.

```css
.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice
```

--------------------------------

### SCSS Dark Mode Support

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Implement dark mode styles by applying different color sets based on the presence of a dark mode class or attribute.

```scss
@apply light-mode-colors dark:dark-mode-colors;
```

--------------------------------

### Apply Styles with Attribute Selectors

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Utilize attribute selectors to apply styles based on element attributes, such as the 'dir' attribute for Right-To-Left (RTL) support.

```scss
.select2-container--tailwindcss-3[dir="rtl"] {
  /* Styles for RTL direction */
}
```

--------------------------------

### Multiple Selection Rendered (Chip Container) CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/css-classes-and-selectors.md

Styles the flexbox wrapper for individual selection chips within the multiple select input. It handles wrapping on smaller screens.

```css
.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered
```

--------------------------------

### Loading State Styling in SCSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Styles for the loading indicator and spinner within the Select2 component. Includes centering and a spinning animation.

```scss
/* Loading state */
.select2-container--tailwindcss-3 .select2-results__option--loading {
  @apply flex items-center justify-center py-4 text-gray-400;
}

/* Loading spinner */
.select2-container--tailwindcss-3 .select2-results__option--loading::after {
  @apply w-5 h-5 border-2 border-gray-300 rounded-full animate-spin border-t-indigo-600;
  content: '';
}
```

--------------------------------

### SCSS Pseudo-element Content

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Utilize pseudo-elements like ::after to add decorative content or visual indicators, with options for CSS-only content.

```scss
.element::after {
  @apply positioning-styles;
  content: "✓"; /* or content: ''; for CSS-only content */
}
```

--------------------------------

### Configure Tailwind CSS Content

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/README.md

Update your `tailwind.config.js` to include the package's CSS file in the `content` array. This ensures Tailwind processes the theme's styles.

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

--------------------------------

### Individual Option CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/css-classes-and-selectors.md

Styles for individual selectable option items within the results list. Includes padding, text color, and transition effects for hover states.

```css
.select2-container--tailwindcss-3 .select2-results__option
```

--------------------------------

### React Integration with Select2

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Integrate Select2 into a React component using `useRef` and `useEffect`. Ensure to import necessary CSS files.

```javascript
import Select2 from "select2";
import "select2/dist/css/select2.min.css";
import "select2-tailwindcss-theme/dist/select2-tailwindcss-theme-plain.min.css";

export function MySelect() {
  const selectRef = useRef(null);

  useEffect(() => {
    $(selectRef.current).select2({
      theme: "tailwindcss-3"
    });
  }, []);

  return <select ref={selectRef}></select>;
}
```

--------------------------------

### Create HTML Input Group with Suffix

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Combine a select element with a succeeding span for a suffix using flexbox and the `.input-group` class. This ensures proper alignment and spacing.

```html
<div class="flex input-group">
  <select>
    <option>Select</option>
  </select>
  <span class="px-3 py-1.5 bg-gray-100 border border-gray-300">
    suffix
  </span>
</div>
```

--------------------------------

### Multiple Select Container Styling

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Styles the main container for multiple-select inputs, ensuring a minimum height and appropriate padding. It handles auto height to accommodate multiple selected items.

```scss
.select2-container--tailwindcss-3 .select2-selection--multiple {
  @apply min-h-[2.25rem] h-auto rounded-md text-base sm:text-sm/6 bg-white py-1.5 
         px-3 border border-gray-300 cursor-default dark:bg-white/5 dark:text-white 
         dark:border-white/10;
}
```

--------------------------------

### Single Selection Container Styling

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Styles the main container for single selection inputs. Ensures a minimum height, appropriate padding, and transitions for state changes.

```scss
.select2-container--tailwindcss-3 .select2-selection--single {
  @apply relative w-full h-auto min-h-[2.25rem] py-1.5 pl-3 pr-8 text-left 
         text-base sm:text-sm/6 transition-colors duration-200 ease-in-out 
         bg-white border border-gray-300 rounded-md cursor-pointer 
         dark:bg-white/5 dark:text-white dark:border-white/10;
}
```

--------------------------------

### Single Selection Focus State Styling

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Applies focus styles to the single selection input, typically triggered by keyboard navigation, adding an indigo ring and border.

```scss
/* Focus styles for keyboard navigation */
.select2-container--tailwindcss-3.select2-container--focus .select2-selection--single {
  @apply ring-1 ring-indigo-600 border-indigo-600 outline-none;
}
```

--------------------------------

### Base Option Item Styling in SCSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Defines the base styling for individual option items within the Select2 results. This includes setting padding, text color, transitions, and cursor behavior.

```scss
.select2-container--tailwindcss-3 .select2-results__option {
  @apply relative py-2 pl-3 text-gray-900 transition-colors duration-150 
         ease-in-out cursor-default select-none pr-9 dark:text-white;
}
```

--------------------------------

### Focus State (Multiple) CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/css-classes-and-selectors.md

Applies a distinct focus ring and border color to the multiple select input when it is in focus, using indigo colors.

```css
.select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple
```

--------------------------------

### Multiple Select Chip List Layout

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Applies flexbox properties to the rendered chip list within a multiple-select input. This allows chips to wrap and defines spacing between them.

```scss
.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__rendered {
  @apply flex flex-row flex-wrap gap-2 m-0 p-0 list-none;
}
```

--------------------------------

### Base Container Styling in SCSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Defines the base container for the Select2 theme, establishing the theme's namespace and setting the display property. This is the foundational styling for the component.

```scss
/* Base container */
.select2-container--tailwindcss-3 {
  @apply block;
}
```

--------------------------------

### Select2 Base Container

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/css-classes-and-selectors.md

The root container for the Select2 theme. Applied with 'display: block'.

```css
.select2-container--tailwindcss-3
```

--------------------------------

### Compose Utilities with @apply Directive

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Use the @apply directive to compose multiple Tailwind CSS utilities into a single SCSS rule. This reduces repetition in HTML and improves SCSS maintainability.

```scss
@apply text-gray-900 bg-white border border-gray-300 rounded-md;
```

--------------------------------

### Toggle Dark Mode with 'dark' Class

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

The theme utilizes the `dark` class, which should be added to the `<html>` element or a parent container to activate dark mode styles. Use JavaScript to dynamically add or remove this class.

```javascript
// Add dark class to toggle
document.documentElement.classList.add("dark");

// Remove dark class to toggle off
document.documentElement.classList.remove("dark");

// Toggle based on local storage
if (localStorage.theme === "dark") {
  document.documentElement.classList.add("dark");
}
```

--------------------------------

### Single Selection RTL Support Styling

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Adjusts padding for the rendered text in single selection inputs when the direction is set to right-to-left (RTL).

```scss
/* RTL Support */
.select2-container--tailwindcss-3[dir="rtl"] .select2-selection--single 
  .select2-selection__rendered {
  @apply pl-10 pr-3;
}
```

--------------------------------

### Focus State (Single) CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/css-classes-and-selectors.md

Applies styles for the focus state of a single select dropdown, including a focus ring and border color change to indicate user interaction.

```css
.select2-container--tailwindcss-3.select2-container--focus .select2-selection--single
```

--------------------------------

### Individual Chip Styling

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Styles the individual chips (selected items) in a multiple-select input. This includes setting background color, text styling, and rounded corners.

```scss
.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice {
  @apply inline-flex items-center rounded-md bg-indigo-100 px-2.5 py-0.5 
         text-base sm:text-sm/6 font-medium text-indigo-800;
}
```

--------------------------------

### Option Groups with TailwindCSS Theme

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Demonstrates using standard HTML `<optgroup>` elements within a Select2 dropdown styled with the TailwindCSS theme.

```html
<select id="grouped">
  <optgroup label="Fruits">
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="carrot">Carrot</option>
    <option value="broccoli">Broccoli</option>
  </optgroup>
</select>

<script>
  $("#grouped").select2({
    theme: "tailwindcss-3"
  });
</script>
```

--------------------------------

### HTML Structure for Select2 Elements

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Use standard HTML select elements for single or multiple selections.

```html
<!-- Single select -->
<select id="single-example">
  <option value="">Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<!-- Multiple select -->
<select id="multiple-example" multiple>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
```

--------------------------------

### Chip Remove Button CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/css-classes-and-selectors.md

Styles the 'x' button on each chip for removal. Includes hover effects and positioning for easy access.

```css
.select2-container--tailwindcss-3 .select2-selection--multiple .select2-selection__choice__remove
```

--------------------------------

### Use Tailwind @apply for Select2 Styling

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/INDEX.md

If your project already uses Tailwind CSS, you can leverage the @apply directive to integrate Select2 styling directly into your Tailwind classes.

```scss
.select2-container--tailwindcss-3 .select2-selection {
  @apply bg-gray-100 border-gray-800 !important;
}
```

--------------------------------

### Angular Integration with Select2

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Integrate Select2 into an Angular component using `ViewChild` and `AfterViewInit`. Import the required Select2 and theme CSS files.

```typescript
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import 'select2/dist/css/select2.min.css';
import 'select2-tailwindcss-theme/dist/select2-tailwindcss-theme-plain.min.css';

@Component({
  selector: 'app-select',
  template: `<select #select></select>`
})
export class SelectComponent implements AfterViewInit {
  @ViewChild('select') selectElement: ElementRef;

  ngAfterViewInit() {
    $(this.selectElement.nativeElement).select2({
      theme: "tailwindcss-3"
    });
  }
}
```

--------------------------------

### Vue Integration with Select2

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Integrate Select2 into a Vue component within the `mounted` lifecycle hook. Import the necessary Select2 and theme CSS files.

```vue
<template>
  <select ref="selectElement">
    <option value="">Select an option</option>
    <option value="1">Option 1</option>
  </select>
</template>

<script>
import Select2 from "select2";
import "select2/dist/css/select2.min.css";
import "select2-tailwindcss-theme/dist/select2-tailwindcss-theme-plain.min.css";

export default {
  mounted() {
    $(this.$refs.selectElement).select2({
      theme: "tailwindcss-3"
    });
  }
}
</script>
```

--------------------------------

### Customize Select2 Colors with CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/usage-and-integration.md

Override default Tailwind CSS utilities in your custom CSS to change focus ring and highlight colors. Ensure to use '!important' to enforce the styles.

```css
/* Override focus ring color */
.select2-container--tailwindcss-3.select2-container--focus .select2-selection {
  @apply ring-blue-600 border-blue-600 !important;
}

/* Override highlight color */
.select2-container--tailwindcss-3 .select2-results__option--highlighted {
  @apply bg-blue-600 !important;
}
```

--------------------------------

### Multiple Select Container CSS

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/css-classes-and-selectors.md

Styles the main container for multiple selections. It ensures dynamic height and applies base Tailwind classes for padding, borders, and dark mode.

```css
.select2-container--tailwindcss-3 .select2-selection--multiple
```

--------------------------------

### SCSS State-based Styling

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Apply base styles and then modify them for specific states like modifiers, hover, or active states using nested selectors.

```scss
.base-element {
  @apply normal-styles;
  
  &.state-modifier {
    @apply state-styles;
  }
  
  &:hover {
    @apply hover-styles;
  }
}
```

--------------------------------

### Focus State Styling for Multiple Select

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Applies focus styles to the multiple-select container, indicating an active state with a ring and border color change. This is consistent with the single-select focus state.

```scss
.select2-container--tailwindcss-3.select2-container--focus .select2-selection--multiple {
  @apply ring-1 ring-indigo-600 border-indigo-600 outline-none;
}
```

--------------------------------

### Clearable Multiple Select Container Styling

Source: https://github.com/erimicel/select2-tailwindcss-theme/blob/main/_autodocs/SCSS-structure-and-organization.md

Adds styling for the clearable state of the multiple-select container, providing extra padding on the right to accommodate the clear button.

```scss
.select2-container--tailwindcss-3 .select2-selection--multiple.select2-selection--clearable {
  @apply pr-4;
}
```