Skip to content

Commit 7ac3a70

Browse files
MydeensnMydeensn
authored
Merge pull request #516 from syncfusion-content/EJ2-926228-hot
926228: Update the documentation page for tailwind 3.4 theme in Vue (hotfix)
2 parents e2231bd + 58a8602 commit 7ac3a70

File tree

17 files changed

+553
-4
lines changed

17 files changed

+553
-4
lines changed

‎ej2-vue/appearance/css-variables.md

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,19 @@ Syncfusion currently offers two modern and highly customizable themes using CSS
1717
* Material 3 Theme
1818
* Fluent 2 Theme
1919
* Bootstrap 5.3 Theme
20+
* Tailwind 3.4 Theme
2021

2122
## CSS themes - Syncfusion Vue components
2223

23-
[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew) and [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
24+
[Material 3](https://m3.material.io/), [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew), [Bootstrap 5.3](https://getbootstrap.com/docs/5.3/getting-started/introduction/) and [Tailwind 3.4](https://tailwindcss.com/docs/installation) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
2425

2526
> Kindly note that in the Material 3 theme, CSS variables with rgb() values are used for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;.
2627
2728
### Utilization of CSS variables in modern themes
2829

29-
Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support with CSS variables, where `Material 3` utilizes `rgb()` values for customizing colors while `Fluent 2` uses `hex` values for color customization. `Bootstrap 5.3` allows color customization with both `rgb()` and `hex` values. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of these themes. The examples below shows CSS variables with their values used for the respective themes.
30+
Modern themes make it easy to change the colors of controls using CSS variables. Each theme has its own way of setting these variables, so it's important to follow the specific instructions for each theme. Doing this helps keep the styling consistent and efficient across different parts of your application.
31+
32+
Below are examples of how CSS variables can be defined for these themes:
3033

3134
{% tabs %}
3235
{% highlight ts tabtitle="material3.css" %}
@@ -38,6 +41,9 @@ Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support wi
3841
{% highlight ts tabtitle="bootstrap5.3.css" %}
3942
{% include code-snippet/common/css-value-cs1/bootstrap5.3.css %}
4043
{% endhighlight %}
44+
{% highlight css tabtitle="tailwind3.4.css" %}
45+
{% include code-snippet/common/css-value-cs1/tailwind3.css %}
46+
{% endhighlight %}
4147
{% endtabs %}
4248

4349
### How to get these themes?
@@ -52,9 +58,11 @@ To access themes provided by Syncfusion, you have two primary options,
5258
|Package | [Material 3 Light](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [Material 3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
5359
| | [Fluent 2 Light](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) | [Fluent 2 Dark](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-dark-theme) |
5460
| | [Bootstrap 5.3 Light](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-theme) | [Bootstrap 5.3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-dark-theme) |
61+
| | [Tailwind 3.4 Light](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) | [Tailwind 3.4 Dark](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-dark-theme) |
5562
| CDN | [Material 3 Light](https://cdn.syncfusion.com/ej2/27.1.48/material3.css) | [Material 3 Dark](https://cdn.syncfusion.com/ej2/27.1.48/material3-dark.css) |
5663
| | [Fluent 2 light](https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css) | [Fluent 2 Dark](https://cdn.syncfusion.com/ej2/27.1.48/fluent2-dark.css) |
5764
| | [Bootstrap5.3 light](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3.css) | [Bootstrap 5.3 Dark](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3-dark.css) |
65+
| | [Tailwind 3.4 Light](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css) | [Tailwind 3.4 Dark](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3-dark.css) |
5866

5967
### Color Customization in themes
6068

@@ -116,11 +124,29 @@ Example for `Bootstrap 5.3` customization using CSS class.
116124

117125
![customized primary value](images/bootstrap5.3-customize.png)
118126

127+
Example for `Tailwind 3.4` customization using CSS class.
128+
129+
{% tabs %}
130+
{% highlight html tabtitle="app.vue" %}
131+
{% include code-snippet/common/tailwind3-cs2/app.vue %}
132+
{% endhighlight %}
133+
{% endtabs %}
134+
135+
{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs2" %}
136+
137+
**Default primary value**
138+
139+
![default primary value](images/tailwind3-default.png)
140+
141+
**Customized primary value**
142+
143+
![customized primary value](images/tailwind3-customize.png)
144+
119145
With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion Vue Components.
120146

121147
### Switching Light and Dark mode with CSS variables
122148

123-
Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In both the `Material 3` and `Fluent 2` light themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application.
149+
Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In all themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application.
124150

125151
{% tabs %}
126152
{% highlight html tabtitle="app.vue" %}
@@ -154,9 +180,21 @@ Similar to `Fluent 2`, we offer both Light and Dark variants with `Bootstrap 5.3
154180

155181
{% previewsample "page.domainurl/code-snippet/common/bootstrap5.3-cs1" %}
156182

183+
### Mode switching in Tailwind 3.4 theme
184+
185+
Similar to `Fluent 2`, we offer both Light and Dark variants with `Tailwind 3.4`. In the Tailwind 3.4 theme, there are distinct class variables for light and dark modes, as shown in the preview below.
186+
187+
{% tabs %}
188+
{% highlight html tabtitle="app.vue" %}
189+
{% include code-snippet/common/tailwind3-cs1/app.vue %}
190+
{% endhighlight %}
191+
{% endtabs %}
192+
193+
{% previewsample "page.domainurl/code-snippet/common/tailwind3-cs1" %}
194+
157195
### How to switch dark mode?
158196

159-
To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3`, `Fluent 2` and `Bootstrap 5.3` themes. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
197+
To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3`, `Fluent 2`, `Bootstrap 5.3` and `Tailwind 3.4` themes. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
160198

161199
`Material 3` dark mode
162200

@@ -170,6 +208,10 @@ To activate dark mode, just append the `e-dark-mode` class to the body section o
170208

171209
![dark mode](images/bootstrap5.3-dark.png)
172210

211+
`Tailwind 3.4` dark mode
212+
213+
![dark mode](images/tailwind3-dark.png)
214+
173215
### ThemeStudio Application
174216

175217
The ThemeStudio application now includes seamless integration with the Material 3, Fluent 2 and Bootstrap 5.3 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.

‎ej2-vue/appearance/icons.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,10 @@ The complete package of Essential JS 2 icons is listed below. The corresponding
193193
194194
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/tailwind/demo.html" style="height:1000px;width:100%;"></iframe>
195195
196+
### Tailwind 3.4
197+
198+
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/tailwind3/demo.html" style="height:1000px;width:100%;"></iframe>
199+
196200
### Fluent 2
197201
198202
<iframe class="doc-sample-frame" src="https://ej2.syncfusion.com/products/icons/fluent2/demo.html" style="height:1000px;width:100%;"></iframe>

‎ej2-vue/appearance/images/tailwind3-customize.png

54.2 KB
Loading

‎ej2-vue/appearance/images/tailwind3-dark.png

30.8 KB
Loading

‎ej2-vue/appearance/images/tailwind3-default.png

53.8 KB
Loading

‎ej2-vue/appearance/theme.md

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ The Syncfusion Vue library has provided the below list of in-built themes,
1414

1515
|Theme |Style Sheet Name|
1616
|--------|--------|
17+
|Tailwind 3.4 | tailwind3.css |
18+
|Tailwind 3.4 Dark | tailwind3-dark.css |
1719
|Bootstrap 5.3 | bootstrap5.3.css |
1820
|Bootstrap 5.3 Dark | bootstrap5.3-dark.css |
1921
|Fluent 2 | fluent2.css |
@@ -148,6 +150,215 @@ To refer to individual component's optimized CSS files from an individual packag
148150

149151
The below list of common variables used in the Syncfusion Vue library themes for all components. You can change these variables to customize the corresponding theme.
150152

153+
### Syncfusion Tailwind 3.4 theme
154+
155+
<table>
156+
<style>
157+
.circle-color-indicator {
158+
width: 1.5em;
159+
height: 1.5em;
160+
border-radius: 50%;
161+
display: inline-block;
162+
border: 1px solid rgba(0, 0, 0, .08);
163+
vertical-align: middle;
164+
}
165+
th, td {
166+
text-align: left;
167+
padding: 5px 15px;
168+
vertical-align: top;
169+
}
170+
</style>
171+
<thead>
172+
<tr>
173+
<th>Name</th>
174+
<th>Value (Default Theme) </th>
175+
<th>Value (Dark Theme) </th>
176+
</tr>
177+
</thead>
178+
<tbody>
179+
<tr>
180+
<td>--color-sf-black</td>
181+
<td>
182+
<span class="circle-color-indicator" style="background: rgb(0,0,0)"></span> rgb(0,0,0)
183+
</td>
184+
<td>
185+
<span class="circle-color-indicator" style="background: rgb(0,0,0)"></span> rgb(0,0,0)
186+
</td>
187+
</tr>
188+
<tr>
189+
<td>--color-sf-white</td>
190+
<td>
191+
<span class="circle-color-indicator" style="background: rgb(255,255,255)"></span> rgb(255,255,255)
192+
</td>
193+
<td>
194+
<span class="circle-color-indicator" style="background: rgb(255,255,255)"></span> rgb(255,255,255)
195+
</td>
196+
</tr>
197+
<tr>
198+
<td>--color-sf-primary</td>
199+
<td>
200+
<span class="circle-color-indicator" style="background: rgba(79, 70, 229)"></span> rgba(79, 70, 229)
201+
</td>
202+
<td>
203+
<span class="circle-color-indicator" style="background: rgba(99, 102, 241)"></span> rgba(99, 102, 241)
204+
</td>
205+
</tr>
206+
<tr>
207+
<td>--color-sf-primary-text-color</td>
208+
<td>
209+
<span class="circle-color-indicator" style="background: #fff"></span> #fff
210+
</td>
211+
<td>
212+
<span class="circle-color-indicator" style="background: #fff"></span> #fff
213+
</td>
214+
</tr>
215+
<tr>
216+
<td>--color-sf-primary-light</td>
217+
<td>
218+
<span class="circle-color-indicator" style="background: #3730a3"></span> #3730a3
219+
</td>
220+
<td>
221+
<span class="circle-color-indicator" style="background: #3730a3"></span> #3730a3
222+
</td>
223+
</tr>
224+
<tr>
225+
<td>--color-sf-primary-lighter</td>
226+
<td>
227+
<span class="circle-color-indicator" style="background: #e0e7ff"></span> #e0e7ff
228+
</td>
229+
<td>
230+
<span class="circle-color-indicator" style="background: #1e1b4b"></span> #1e1b4b
231+
</td>
232+
</tr>
233+
<tr>
234+
<td>--color-sf-primary-dark</td>
235+
<td>
236+
<span class="circle-color-indicator" style="background: #4338ca"></span> #4338ca
237+
</td>
238+
<td>
239+
<span class="circle-color-indicator" style="background: #818cf8"></span> #818cf8
240+
</td>
241+
</tr>
242+
<tr>
243+
<td>--color-sf-primary-darker</td>
244+
<td>
245+
<span class="circle-color-indicator" style="background: #3730a3"></span> #3730a3
246+
</td>
247+
<td>
248+
<span class="circle-color-indicator" style="background: #4f46e5"></span> #4f46e5
249+
</td>
250+
</tr>
251+
<tr>
252+
<td>--color-sf-success</td>
253+
<td>
254+
<span class="circle-color-indicator" style="background: #15803d"></span> #15803d
255+
</td>
256+
<td>
257+
<span class="circle-color-indicator" style="background: #22c55e"></span> #22c55e
258+
</td>
259+
</tr>
260+
<tr>
261+
<td>--color-sf-info</td>
262+
<td>
263+
<span class="circle-color-indicator" style="background: #0e7490"></span> #0e7490
264+
</td>
265+
<td>
266+
<span class="circle-color-indicator" style="background: #38bdf8"></span> #38bdf8
267+
</td>
268+
</tr>
269+
<tr>
270+
<td>--color-sf-warning</td>
271+
<td>
272+
<span class="circle-color-indicator" style="background: #c2410c"></span> #c2410c
273+
</td>
274+
<td>
275+
<span class="circle-color-indicator" style="background: #f97316"></span> #f97316
276+
</td>
277+
</tr>
278+
<tr>
279+
<td>--color-sf-danger</td>
280+
<td>
281+
<span class="circle-color-indicator" style="background: #dc2626"></span> #dc2626
282+
</td>
283+
<td>
284+
<span class="circle-color-indicator" style="background: #f87171"></span> #f87171
285+
</td>
286+
</tr>
287+
<tr>
288+
<td>--color-sf-success-light</td>
289+
<td>
290+
<span class="circle-color-indicator" style="background: #dcfce7"></span> #dcfce7
291+
</td>
292+
<td>
293+
<span class="circle-color-indicator" style="background: #164c37"></span> #164c37
294+
</td>
295+
</tr>
296+
<tr>
297+
<td>--color-sf-info-light</td>
298+
<td>
299+
<span class="circle-color-indicator" style="background: #cffafe"></span> #cffafe
300+
</td>
301+
<td>
302+
<span class="circle-color-indicator" style="background: #0e485b"></span> #0e485b
303+
</td>
304+
</tr>
305+
<tr>
306+
<td>--color-sf-warning-light</td>
307+
<td>
308+
<span class="circle-color-indicator" style="background: #ffedd5"></span> #ffedd5
309+
</td>
310+
<td>
311+
<span class="circle-color-indicator" style="background: #573422"></span> #573422
312+
</td>
313+
</tr>
314+
<tr>
315+
<td>--color-sf-danger-light</td>
316+
<td>
317+
<span class="circle-color-indicator" style="background: #fee2e2"></span> #fee2e2
318+
</td>
319+
<td>
320+
<span class="circle-color-indicator" style="background: #54252f"></span> #54252f
321+
</td>
322+
</tr>
323+
<tr>
324+
<td>--color-sf-success-dark</td>
325+
<td>
326+
<span class="circle-color-indicator" style="background: #166534"></span> #166534
327+
</td>
328+
<td>
329+
<span class="circle-color-indicator" style="background: #4ade80"></span> #4ade80
330+
</td>
331+
</tr>
332+
<tr>
333+
<td>--color-sf-info-dark</td>
334+
<td>
335+
<span class="circle-color-indicator" style="background: #155e75"></span> #155e75
336+
</td>
337+
<td>
338+
<span class="circle-color-indicator" style="background: #38bdf8"></span> #38bdf8
339+
</td>
340+
</tr>
341+
<tr>
342+
<td>--color-sf-warning-dark</td>
343+
<td>
344+
<span class="circle-color-indicator" style="background: #9a3412"></span> #9a3412
345+
</td>
346+
<td>
347+
<span class="circle-color-indicator" style="background: #fb923c"></span> #fb923c
348+
</td>
349+
</tr>
350+
<tr>
351+
<td>--color-sf-danger-dark</td>
352+
<td>
353+
<span class="circle-color-indicator" style="background: #b91c1c"></span> #b91c1c
354+
</td>
355+
<td>
356+
<span class="circle-color-indicator" style="background: #ef4444"></span> #ef4444
357+
</td>
358+
</tr>
359+
</tbody>
360+
</table>
361+
151362
### Syncfusion Bootstrap 5.3 theme
152363

153364
<table>

‎ej2-vue/code-snippet/common/css-value-cs1/tailwind3.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
:root{
2+
--color-sf-content-bg-color: rgba(255, 255, 255);
3+
--color-sf-content-bg-color-alt1: #f9fafb;
4+
--color-sf-content-bg-color-alt2: #f3f4f6;
5+
--color-sf-content-bg-color-alt3: #e5e7eb;
6+
--color-sf-content-bg-color-alt4: #9ca3af;
7+
--color-sf-content-bg-color-alt5: #6b7280;
8+
--color-sf-content-bg-color-hover: #f9fafb;
9+
--color-sf-content-bg-color-pressed: #f3f4f6;
10+
--color-sf-content-bg-color-focus: #f9fafb;
11+
--color-sf-content-bg-color-selected: #e5e7eb;
12+
--color-sf-content-bg-color-dragged: #f3f4f6;
13+
--color-sf-content-bg-color-disabled: #ffffff;
14+
--color-sf-flyout-bg-color: #ffffff;
15+
--color-sf-flyout-bg-color-hover: #f3f4f6;
16+
--color-sf-flyout-bg-color-pressed: #e5e7eb;
17+
--color-sf-flyout-bg-color-focus: #f3f4f6;
18+
--color-sf-flyout-bg-color-selected: #e5e7eb;
19+
--color-sf-flyout-bg-color-disabled: #fff;
20+
--color-sf-overlay-bg-color: rgba(107, 114, 128, 74.9);
21+
--color-sf-table-bg-color-hover: #f9fafb;
22+
--color-sf-table-bg-color-pressed: #f3f4f6;
23+
--color-sf-table-bg-color-selected: #e5e7eb;
24+
--color-sf-text-input-bg-color: #ffffff;
25+
--color-sf-treeview-item-active-hover-bg: #e5e7eb;
26+
}

0 commit comments

Comments
 (0)