Tailwind Theme

The Tailwind theme aligns DotSelect with Tailwind CSS design conventions, including built-in dark mode support.

Usage

CDN

html

<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- DotSelect Tailwind Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dot-select@latest/dist/css/themes/tailwind.min.css">

<!-- DotSelect JS -->
<script src="https://cdn.jsdelivr.net/npm/dot-select@latest/dist/js/dot-select.min.js"></script>

npm

import 'dot-select/dist/css/themes/tailwind.min.css';

SCSS

scss

@import 'dot-select/src/scss/themes/tailwind';

Example

<div class="max-w-md mx-auto p-6">
  <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
    Assign to
  </label>
  <select
    data-dot-select
    data-searchable="true"
    data-allow-clear="true"
    data-placeholder="Search team members..."
  >
    <option value="">Search team members...</option>
    <option value="1">Alice Johnson</option>
    <option value="2">Bob Smith</option>
    <option value="3">Carol Williams</option>
  </select>
</div>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <div class="max-w-md mx-auto p-6">
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
        Assign to
      </label>
      <select
        data-dot-select
        data-searchable="true"
        data-allow-clear="true"
        data-placeholder="Search team members..."
      >
        <option value="">Search team members...</option>
        <option value="1">Alice Johnson</option>
        <option value="2">Bob Smith</option>
        <option value="3">Carol Williams</option>
      </select>
    </div>
  )
}

<template>
  <div class="max-w-md mx-auto p-6">
    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
      Assign to
    </label>
    <select
      data-dot-select
      data-searchable="true"
      data-allow-clear="true"
      data-placeholder="Search team members..."
    >
      <option value="">Search team members...</option>
      <option value="1">Alice Johnson</option>
      <option value="2">Bob Smith</option>
      <option value="3">Carol Williams</option>
    </select>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Dark Mode

The Tailwind theme supports dark mode out of the box. It responds to the dark class on the <html> element (Tailwind's class-based dark mode strategy):

html

<html class="dark">
  <body class="bg-gray-900">
  </body>
</html>

<select data-dot-select data-placeholder="Dark mode select...">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

import { DotSelect } from 'dot-select'

const ds = new DotSelect('select[data-dot-select]')

// API
ds.getValue()
ds.setValue(['value'])
ds.clear()
ds.destroy()

import { useEffect, useRef } from 'react'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

export default function Select() {
  const ref = useRef(null)

  useEffect(() => {
    const ds = new DotSelect(ref.current)
    return () => ds.destroy()
  }, [])

  return (
    <select data-dot-select data-placeholder="Dark mode select...">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
    </select>
  )
}

<template>
  <select data-dot-select data-placeholder="Dark mode select...">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { DotSelect } from 'dot-select'
import 'dot-select/css'

const selectRef = ref(null)
let ds = null

onMounted(() => {
  ds = new DotSelect(selectRef.value)
})

onBeforeUnmount(() => {
  ds?.destroy()
})
</script>

Dark mode automatically adjusts:

Background colors to dark grays
Text colors to light grays and whites
Border colors to dark gray tones
Focus rings to the configured primary color
Dropdown shadows for dark backgrounds
Selected item badges for dark contrast

Media Query Dark Mode

If you prefer Tailwind's media strategy (based on prefers-color-scheme), the theme supports that too:

scss

$ds-dark-mode-strategy: 'media'; // 'class' (default) or 'media'
@import 'dot-select/src/scss/themes/tailwind';

Tailwind Theme Variables

Variable	Light Value	Dark Value	Description
`$ds-primary-color`	`#3b82f6`	`#60a5fa`	Primary accent
`$ds-bg-color`	`#ffffff`	`#1f2937`	Control background
`$ds-text-color`	`#111827`	`#f9fafb`	Text color
`$ds-border-color`	`#d1d5db`	`#4b5563`	Border color
`$ds-placeholder-color`	`#9ca3af`	`#6b7280`	Placeholder text
`$ds-dropdown-bg`	`#ffffff`	`#374151`	Dropdown background
`$ds-option-hover-bg`	`#f3f4f6`	`#4b5563`	Option hover
`$ds-item-bg`	`#eff6ff`	`#1e3a5f`	Selected item bg
`$ds-item-color`	`#1e40af`	`#93c5fd`	Selected item text

Customizing

Override variables before importing:

scss

$ds-primary-color: #8b5cf6;    // Violet
$ds-border-radius: 0.5rem;

@import 'dot-select/src/scss/themes/tailwind';

TIP

The Tailwind theme uses Tailwind-compatible spacing (multiples of 4px), border-radius values, and color palettes, so it blends naturally with Tailwind-styled forms.

Tailwind Theme ​

Usage ​

CDN ​

npm ​

SCSS ​

Example ​

Dark Mode ​

Media Query Dark Mode ​

Tailwind Theme Variables ​

Customizing ​

Tailwind Theme

Usage

CDN

npm

SCSS

Example

Dark Mode

Media Query Dark Mode

Tailwind Theme Variables

Customizing