Skip to content

Commit 4684038

Browse files
erimicelerimicel
authored
Merge pull request #1 from erimicel/gh-pages
Move gh-pages to main branch
2 parents e217884 + c61fa3b commit 4684038

8 files changed

+191
-2
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
NPM Links
44

5-
[Select2](https://github.com/select2/select2) v4 theme for TailwindCSS v3.4
5+
[Select2](https://github.com/select2/select2) v4 theme for TailwindCSS v3.4, inspired by [select2-bootstrap4-theme](https://github.com/ttskch/select2-bootstrap4-theme)
66

77
## Live demo
88

‎docs/.DS_Store

6 KB
Binary file not shown.

‎docs/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Live demo
2+
3+
https://erimicel.github.io/select2-tailwindcss-theme/

‎docs/css/tailwind.css

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Select2 Tailwindcss Theme</title>
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
9+
<script src="https://cdn.tailwindcss.com"></script>
10+
11+
<link href="css/tailwind.css" rel="stylesheet">
12+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
13+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
14+
</head>
15+
16+
<body class="bg-gray-100 font-sans antialiased">
17+
18+
<header class="bg-blue-600 text-white py-4 shadow">
19+
<h1 class="text-center text-xl font-bold">Select2 Tailwindcss Theme Demo</h1>
20+
</header>
21+
22+
<main class="max-w-4xl mx-auto mt-8 p-6 bg-white rounded-lg shadow-lg">
23+
<h2 class="text-2xl font-semibold text-gray-800 mb-6">
24+
Examples of
25+
<a href="https://github.com/erimicel/select2-tailwindcss-theme" target="_blank" class="text-blue-600">
26+
@erimicel/select2-tailwindcss-theme
27+
</a>
28+
</h2>
29+
30+
<form class="space-y-4">
31+
<!-- Single Select -->
32+
<div>
33+
<label class="block text-sm font-medium text-gray-700 mb-2">Example of single select</label>
34+
<select data-placeholder="Choose one thing" data-allow-clear="1">
35+
<option></option>
36+
<option>1</option>
37+
<option>2</option>
38+
<option>3</option>
39+
<option>4</option>
40+
<option>5</option>
41+
</select>
42+
</div>
43+
44+
<!-- Tags Select -->
45+
<div>
46+
<label class="block text-sm font-medium text-gray-700 mb-2">Example of dynamic option creation</label>
47+
<select multiple data-placeholder="Type anything" data-allow-clear="1" data-tags="1">
48+
<option>Alaska</option>
49+
<option>Hawaii</option>
50+
<!-- Additional options omitted for brevity -->
51+
</select>
52+
</div>
53+
54+
<!-- Multiple Select -->
55+
<div>
56+
<label class="block text-sm font-medium text-gray-700 mb-2">Example of multiple select</label>
57+
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
58+
<option>Alaska</option>
59+
<option>Hawaii</option>
60+
<!-- Additional options omitted for brevity -->
61+
</select>
62+
</div>
63+
64+
<!-- Disabled Select -->
65+
<div>
66+
<label class="block text-sm font-medium text-gray-700 mb-2">Example of disabled select</label>
67+
<select disabled data-placeholder="Cannot choose" data-allow-clear="1"></select>
68+
</div>
69+
70+
<!-- Multiple Disabled Select -->
71+
<div>
72+
<label class="block text-sm font-medium text-gray-700 mb-2">Example of disabled multiple select with selected items</label>
73+
<select disabled multiple>
74+
<option selected>Alaska</option>
75+
<option selected>Hawaii</option>
76+
</select>
77+
</div>
78+
79+
<!-- Select with Optgroup -->
80+
<div>
81+
<label class="block text-sm font-medium text-gray-700 mb-2">Example of select with optgroup</label>
82+
<select data-placeholder="Choose one thing" data-allow-clear="1">
83+
<option></option>
84+
<optgroup label="Group A">
85+
<option>A1</option>
86+
<option>A2</option>
87+
<option>A3</option>
88+
</optgroup>
89+
<optgroup label="Group B">
90+
<option>B1</option>
91+
<option>B2</option>
92+
<option>B3</option>
93+
</optgroup>
94+
</select>
95+
</div>
96+
97+
<!-- Input Group -->
98+
<div>
99+
<label class="block text-sm font-medium text-gray-700 mb-2">Example of input group</label>
100+
<div class="flex">
101+
<span class="inline-flex items-center px-3 bg-gray-200 text-gray-600 rounded-l-md">Prepend</span>
102+
<select data-placeholder="Choose one thing" data-allow-clear="1">
103+
<option></option>
104+
<option>1</option>
105+
<option>2</option>
106+
<option>3</option>
107+
</select>
108+
</div>
109+
110+
<div class="flex">
111+
<select data-placeholder="Choose one thing" data-allow-clear="1">
112+
<option></option>
113+
<option>1</option>
114+
<option>2</option>
115+
<option>3</option>
116+
</select>
117+
<span class="inline-flex items-center px-3 bg-gray-200 text-gray-600 rounded-l-md">Append</span>
118+
</div>
119+
120+
<div class="flex">
121+
<span class="inline-flex items-center px-3 bg-gray-200 text-gray-600 rounded-l-md">Prepend</span>
122+
<select data-placeholder="Choose one thing" data-allow-clear="1">
123+
<option></option>
124+
<option>1</option>
125+
<option>2</option>
126+
<option>3</option>
127+
</select>
128+
<span class="inline-flex items-center px-3 bg-gray-200 text-gray-600 rounded-l-md">Append</span>
129+
</div>
130+
</div>
131+
132+
<!-- Validated Select -->
133+
<div>
134+
<label class="block text-sm font-medium text-gray-700 mb-2">Example of validated select</label>
135+
<select data-placeholder="Invalid example" data-allow-clear="1">
136+
<option></option>
137+
</select>
138+
<p class="text-sm text-red-500 mt-2">Something is wrong.</p>
139+
</div>
140+
</form>
141+
</main>
142+
143+
<footer class="my-12 text-center text-gray-600">
144+
<p class="text-sm">Select2 4.1.0-rc.0, TailwindCSS 3.4.17, jQuery 3.7.1</p>
145+
</footer>
146+
147+
<script>
148+
$(function () {
149+
$('select').each(function () {
150+
$(this).select2({
151+
theme: 'tailwindcss-3',
152+
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
153+
placeholder: $(this).data('placeholder') || 'Select an option',
154+
allowClear: Boolean($(this).data('allow-clear')),
155+
closeOnSelect: !$(this).attr('multiple'),
156+
tags: Boolean($(this).data('tags')),
157+
});
158+
});
159+
});
160+
</script>
161+
162+
</body>
163+
164+
</html>

‎docs/tailwind.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: [
4+
'./**/*.{html,js}',
5+
],
6+
theme: {
7+
extend: {},
8+
},
9+
plugins: [],
10+
}
11+

‎docs/tailwind.css

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
"build": "sass src/select2-tailwindcss-theme.scss dist/select2-tailwindcss-theme.css",
88
"build:min": "MINIFY=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme.min.css --verbose",
99
"build:plain": "VERBOSE=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.css --verbose",
10-
"build:plain:min": "MINIFY=true VERBOSE=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.min.css --verbose"
10+
"build:plain:min": "MINIFY=true VERBOSE=true npx postcss dist/select2-tailwindcss-theme.css -o dist/select2-tailwindcss-theme-plain.min.css --verbose",
11+
"build:demo": "npx tailwindcss -i ./demo/tailwind.css -o ./demo/css/tailwind.css --minify"
1112
},
1213
"repository": {
1314
"type": "git",

0 commit comments

Comments
 (0)