Skip to content

Commit 81a16bc

Browse files
erimicelerimicel
committed
README.md corrections
1 parent abfa3e7 commit 81a16bc

File tree

2 files changed

+30
-26
lines changed

2 files changed

+30
-26
lines changed

‎README.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,24 @@ https://erimicel.github.io/select2-tailwindcss-theme/
1818

1919
## 📦 Installation
2020

21-
### CDN
21+
### CDN
2222

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

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

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

3333
```bash
3434
# npm
35-
$ npm install @erimicel/select-tailwindcss-theme
35+
$ npm install select2-tailwindcss-theme
3636

3737
# yarn
38-
$ yarn add @erimicel/select-tailwindcss-theme
38+
$ yarn add select2-tailwindcss-theme
3939
```
4040

4141
## Usage

‎docs/index.html

+25-21
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,29 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<meta name="description" content="A Select2 theme for Tailwindcss">
9+
<meta name="author" content="Erim Icel">
10+
711
<title>Select2 Tailwindcss Theme</title>
812
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
913
<script src="https://cdn.tailwindcss.com"></script>
1014

1115
<link href="css/tailwind.css" rel="stylesheet">
12-
<link href="https://cdn.jsdelivr.net/gh/erimicel/select2-tailwindcss-theme@1.0.0/dist/select2-tailwindcss-theme-plain.min.css" rel="stylesheet">
16+
<link href="https://cdn.jsdelivr.net/gh/erimicel/select2-tailwindcss-theme@1.1.1/dist/select2-tailwindcss-theme-plain.min.css" rel="stylesheet">
1317
<link href="css/select2-tailwindcss-theme-plain.min.css" rel="stylesheet">
1418
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
1519
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
1620
</head>
1721

18-
<body class="bg-gray-100 font-sans antialiased">
22+
<body class="font-sans antialiased bg-gray-100">
1923

20-
<header class="bg-blue-600 text-white py-4 shadow">
21-
<h1 class="text-center text-xl font-bold">Select2 Tailwindcss Theme Demo</h1>
24+
<header class="py-4 text-white bg-blue-600 shadow">
25+
<h1 class="text-xl font-bold text-center">Select2 Tailwindcss Theme Demo</h1>
2226
</header>
2327

24-
<main class="max-w-4xl mx-auto mt-8 p-6 bg-white rounded-lg shadow-lg">
25-
<h2 class="text-2xl font-semibold text-gray-800 mb-6">
28+
<main class="max-w-4xl p-6 mx-auto mt-8 bg-white rounded-lg shadow-lg">
29+
<h2 class="mb-6 text-2xl font-semibold text-gray-800">
2630
Examples of
2731
<a href="https://github.com/erimicel/select2-tailwindcss-theme" target="_blank" class="text-blue-600">
2832
@erimicel/select2-tailwindcss-theme
@@ -32,7 +36,7 @@ <h2 class="text-2xl font-semibold text-gray-800 mb-6">
3236
<form class="space-y-4">
3337
<!-- Single Select -->
3438
<div>
35-
<label class="block text-sm font-medium text-gray-700 mb-2">Example of single select</label>
39+
<label class="block mb-2 text-sm font-medium text-gray-700">Example of single select</label>
3640
<select data-placeholder="Choose one thing" data-allow-clear="1">
3741
<option></option>
3842
<option>1</option>
@@ -45,7 +49,7 @@ <h2 class="text-2xl font-semibold text-gray-800 mb-6">
4549

4650
<!-- Tags Select -->
4751
<div>
48-
<label class="block text-sm font-medium text-gray-700 mb-2">Example of dynamic option creation</label>
52+
<label class="block mb-2 text-sm font-medium text-gray-700">Example of dynamic option creation</label>
4953
<select multiple data-placeholder="Type anything" data-allow-clear="1" data-tags="1">
5054
<option>Alaska</option>
5155
<option>Hawaii</option>
@@ -55,7 +59,7 @@ <h2 class="text-2xl font-semibold text-gray-800 mb-6">
5559

5660
<!-- Multiple Select -->
5761
<div>
58-
<label class="block text-sm font-medium text-gray-700 mb-2">Example of multiple select</label>
62+
<label class="block mb-2 text-sm font-medium text-gray-700">Example of multiple select</label>
5963
<select multiple data-placeholder="Choose anything" data-allow-clear="1">
6064
<option>Alaska</option>
6165
<option>Hawaii</option>
@@ -65,13 +69,13 @@ <h2 class="text-2xl font-semibold text-gray-800 mb-6">
6569

6670
<!-- Disabled Select -->
6771
<div>
68-
<label class="block text-sm font-medium text-gray-700 mb-2">Example of disabled select</label>
72+
<label class="block mb-2 text-sm font-medium text-gray-700">Example of disabled select</label>
6973
<select disabled data-placeholder="Cannot choose" data-allow-clear="1"></select>
7074
</div>
7175

7276
<!-- Multiple Disabled Select -->
7377
<div>
74-
<label class="block text-sm font-medium text-gray-700 mb-2">Example of disabled multiple select with selected items</label>
78+
<label class="block mb-2 text-sm font-medium text-gray-700">Example of disabled multiple select with selected items</label>
7579
<select disabled multiple>
7680
<option selected>Alaska</option>
7781
<option selected>Hawaii</option>
@@ -80,7 +84,7 @@ <h2 class="text-2xl font-semibold text-gray-800 mb-6">
8084

8185
<!-- Select with Optgroup -->
8286
<div>
83-
<label class="block text-sm font-medium text-gray-700 mb-2">Example of select with optgroup</label>
87+
<label class="block mb-2 text-sm font-medium text-gray-700">Example of select with optgroup</label>
8488
<select data-placeholder="Choose one thing" data-allow-clear="1">
8589
<option></option>
8690
<optgroup label="Group A">
@@ -98,9 +102,9 @@ <h2 class="text-2xl font-semibold text-gray-800 mb-6">
98102

99103
<!-- Input Group -->
100104
<div>
101-
<label class="block text-sm font-medium text-gray-700 mb-2">Example of input group (.input-group)</label>
105+
<label class="block mb-2 text-sm font-medium text-gray-700">Example of input group (.input-group)</label>
102106
<div class="flex input-group">
103-
<span class="flex shrink-0 items-center rounded-l-md bg-white px-3 text-base text-gray-500 border border-gray-300 sm:text-sm/6">Prepend</span>
107+
<span class="flex items-center px-3 text-base text-gray-500 bg-white border border-gray-300 shrink-0 rounded-l-md sm:text-sm/6">Prepend</span>
104108
<select data-placeholder="Choose one thing" data-allow-clear="1">
105109
<option></option>
106110
<option>1</option>
@@ -109,35 +113,35 @@ <h2 class="text-2xl font-semibold text-gray-800 mb-6">
109113
</select>
110114
</div>
111115

112-
<div class="flex input-group mt-1">
116+
<div class="flex mt-1 input-group">
113117
<select data-placeholder="Choose one thing" data-allow-clear="1">
114118
<option></option>
115119
<option>1</option>
116120
<option>2</option>
117121
<option>3</option>
118122
</select>
119-
<span class="flex shrink-0 items-center rounded-r-md bg-white px-3 text-base text-gray-500 border border-gray-300 sm:text-sm/6">Append</span>
123+
<span class="flex items-center px-3 text-base text-gray-500 bg-white border border-gray-300 shrink-0 rounded-r-md sm:text-sm/6">Append</span>
120124
</div>
121125

122-
<div class="flex input-group mt-1">
123-
<span class="flex shrink-0 items-center rounded-l-md bg-white px-3 text-base text-gray-500 border border-gray-300 sm:text-sm/6">Prepend</span>
126+
<div class="flex mt-1 input-group">
127+
<span class="flex items-center px-3 text-base text-gray-500 bg-white border border-gray-300 shrink-0 rounded-l-md sm:text-sm/6">Prepend</span>
124128
<select data-placeholder="Choose one thing" data-allow-clear="1">
125129
<option></option>
126130
<option>1</option>
127131
<option>2</option>
128132
<option>3</option>
129133
</select>
130-
<span class="flex shrink-0 items-center rounded-r-md bg-white px-3 text-base text-gray-500 border border-gray-300 sm:text-sm/6">Append</span>
134+
<span class="flex items-center px-3 text-base text-gray-500 bg-white border border-gray-300 shrink-0 rounded-r-md sm:text-sm/6">Append</span>
131135
</div>
132136
</div>
133137

134138
<!-- Validated Select -->
135139
<div>
136-
<label class="block text-sm font-medium text-gray-700 mb-2">Example of validated select (.is-valid, :invalid)</label>
140+
<label class="block mb-2 text-sm font-medium text-gray-700">Example of validated select (.is-valid, :invalid)</label>
137141
<select class="is-invalid" data-placeholder="Invalid example" data-allow-clear="1">
138142
<option></option>
139143
</select>
140-
<p class="text-sm text-red-500 mt-2">Something is wrong.</p>
144+
<p class="mt-2 text-sm text-red-500">Something is wrong.</p>
141145
</div>
142146
</form>
143147
</main>

0 commit comments

Comments
 (0)