diff --git a/ej2-react/appearance/css-variables.md b/ej2-react/appearance/css-variables.md
index 818c6c227..dc7f4edf3 100644
--- a/ej2-react/appearance/css-variables.md
+++ b/ej2-react/appearance/css-variables.md
@@ -17,16 +17,19 @@ Syncfusion currently offers two modern and highly customizable themes using CSS
* Material 3 Theme
* Fluent 2 Theme
* Bootstrap 5.3 Theme
+* Tailwind 3.4 Theme
## CSS themes - Syncfusion React components
-[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.
+[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.
> 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;.
### Utilization of CSS variables in modern themes
-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.
+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.
+
+Below are examples of how CSS variables can be defined for these themes:
{% tabs %}
{% highlight ts tabtitle="material3.css" %}
@@ -38,6 +41,9 @@ Modern themes like Material 3, Fluent 2 and Bootstrap 5.3 incorporate support wi
{% highlight ts tabtitle="bootstrap5.3.css" %}
{% include code-snippet/common/css-value-cs1/bootstrap5.3.css %}
{% endhighlight %}
+{% highlight ts tabtitle="tailwind3.4.css" %}
+{% include code-snippet/common/css-value-cs1/tailwind3.4.css %}
+{% endhighlight %}
{% endtabs %}
### How to get these themes?
@@ -52,9 +58,11 @@ To access themes provided by Syncfusion, you have two primary options,
|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) |
| | [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) |
| | [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) |
+| | [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) |
| 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) |
| | [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) |
| | [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) |
+| | [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) |
### Color Customization in themes
@@ -134,11 +142,35 @@ Example for `Bootstrap 5.3` customization using CSS class.
+Example for `Tailwind 3.4` customization using CSS class.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/common/tailwind3.4-cs2/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/common/tailwind3.4-cs2/app/index.tsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.css" %}
+{% include code-snippet/common/tailwind3.4-cs2/index.css %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/tailwind3.4-cs2" %}
+
+**Default Tailwind 3.4 primary value**
+
+
+
+**Customized Tailwind 3.4 primary value**
+
+
+
With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion React Components.
### Switching Light and Dark mode with CSS variables
-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.
+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.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
@@ -181,9 +213,24 @@ Similar to `Fluent 2`, we offer both Light and Dark variants with `Bootstrap 5.3
{% previewsample "page.domainurl/code-snippet/common/bootstrap5.3-cs1" %}
+### Mode switching in Tailwind 3.4 theme
+
+Similar to `Fluent 2`, we offer both Light and Dark variants with `Tailwind 3.4`. In the Fluent 2 theme, there are distinct class variables for light and dark modes, as shown in the preview below.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/common/tailwind3.4-cs1/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/common/tailwind3.4-cs1/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/tailwind3.4-cs1" %}
+
### How to switch dark mode?
-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.
+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.
`Material 3` dark mode
@@ -197,6 +244,10 @@ To activate dark mode, just append the `e-dark-mode` class to the body section o
+`Tailwind 3.4` dark mode
+
+
+
### ThemeStudio Application
The ThemeStudio application now includes seamless integration with the Material 3 and Fluent 2 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.
diff --git a/ej2-react/appearance/icons.md b/ej2-react/appearance/icons.md
index 41173652e..de982339c 100644
--- a/ej2-react/appearance/icons.md
+++ b/ej2-react/appearance/icons.md
@@ -210,6 +210,10 @@ The complete package of Essential JS 2 icons is listed below. The corresponding
+### Tailwind 3.4
+
+
+
### Fluent 2
diff --git a/ej2-react/appearance/images/tailwind3-customize.png b/ej2-react/appearance/images/tailwind3-customize.png
new file mode 100644
index 000000000..837249c88
Binary files /dev/null and b/ej2-react/appearance/images/tailwind3-customize.png differ
diff --git a/ej2-react/appearance/images/tailwind3-dark.png b/ej2-react/appearance/images/tailwind3-dark.png
new file mode 100644
index 000000000..14160b09a
Binary files /dev/null and b/ej2-react/appearance/images/tailwind3-dark.png differ
diff --git a/ej2-react/appearance/images/tailwind3-default.png b/ej2-react/appearance/images/tailwind3-default.png
new file mode 100644
index 000000000..9c0ad784a
Binary files /dev/null and b/ej2-react/appearance/images/tailwind3-default.png differ
diff --git a/ej2-react/appearance/theme.md b/ej2-react/appearance/theme.md
index 277556be4..597eb34f1 100644
--- a/ej2-react/appearance/theme.md
+++ b/ej2-react/appearance/theme.md
@@ -14,6 +14,8 @@ The Syncfusion React UI can allow you to apply styles for the components. The fo
|Theme |Style Sheet Name|
|--------|--------|
+|Tailwind 3.4 | tailwind3.css |
+|Tailwind 3.4 Dark | tailwind3-dark.css |
|Bootstrap 5.3 | bootstrap5.3.css |
|Bootstrap 5.3 Dark | bootstrap5.3-dark.css |
|Fluent 2 | fluent2.css |
@@ -191,6 +193,8 @@ To refer to optimized CSS files, use the following syntax:
| Theme Name | CDN Reference |
|--- | --- |
+| Tailwind 3.4 | [https://cdn.syncfusion.com/ej2/28.1.33/tailwind3.css](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](https://cdn.syncfusion.com/ej2/28.1.33/tailwind3-dark.css) |
| Bootstrap 5.3 | [https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3.css](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](https://cdn.syncfusion.com/ej2/27.1.48/bootstrap5.3-dark.css) |
| Fluent 2 | [https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css](https://cdn.syncfusion.com/ej2/27.1.48/fluent2.css) |
@@ -218,6 +222,215 @@ The following list of common variables are used in the Syncfusion JavaScript lib
+### Syncfusion Tailwind 3.4 theme
+
+
+
+
+
+
Name
+
Value (Default Theme)
+
Value (Dark Theme)
+
+
+
+
+
--color-sf-black
+
+ rgb(0,0,0)
+
+
+ rgb(0,0,0)
+
+
+
+
--color-sf-white
+
+ rgb(255,255,255)
+
+
+ rgb(255,255,255)
+
+
+
+
--color-sf-primary
+
+ rgba(79, 70, 229)
+
+
+ rgba(99, 102, 241)
+
+
+
+
--color-sf-primary-text-color
+
+ #fff
+
+
+ #fff
+
+
+
+
--color-sf-primary-light
+
+ #3730a3
+
+
+ #3730a3
+
+
+
+
--color-sf-primary-lighter
+
+ #e0e7ff
+
+
+ #1e1b4b
+
+
+
+
--color-sf-primary-dark
+
+ #4338ca
+
+
+ #818cf8
+
+
+
+
--color-sf-primary-darker
+
+ #3730a3
+
+
+ #4f46e5
+
+
+
+
--color-sf-success
+
+ #15803d
+
+
+ #22c55e
+
+
+
+
--color-sf-info
+
+ #0e7490
+
+
+ #38bdf8
+
+
+
+
--color-sf-warning
+
+ #c2410c
+
+
+ #f97316
+
+
+
+
--color-sf-danger
+
+ #dc2626
+
+
+ #f87171
+
+
+
+
--color-sf-success-light
+
+ #dcfce7
+
+
+ #164c37
+
+
+
+
--color-sf-info-light
+
+ #cffafe
+
+
+ #0e485b
+
+
+
+
--color-sf-warning-light
+
+ #ffedd5
+
+
+ #573422
+
+
+
+
--color-sf-danger-light
+
+ #fee2e2
+
+
+ #54252f
+
+
+
+
--color-sf-success-dark
+
+ #166534
+
+
+ #4ade80
+
+
+
+
--color-sf-info-dark
+
+ #155e75
+
+
+ #38bdf8
+
+
+
+
--color-sf-warning-dark
+
+ #9a3412
+
+
+ #fb923c
+
+
+
+
--color-sf-danger-dark
+
+ #b91c1c
+
+
+ #ef4444
+
+
+
+
+
### Syncfusion Bootstrap 5.3 theme
diff --git a/ej2-react/code-snippet/common/css-value-cs1/tailwind3.4.css b/ej2-react/code-snippet/common/css-value-cs1/tailwind3.4.css
new file mode 100644
index 000000000..b49de4d6e
--- /dev/null
+++ b/ej2-react/code-snippet/common/css-value-cs1/tailwind3.4.css
@@ -0,0 +1,26 @@
+:root{
+ --color-sf-content-bg-color: rgba(255, 255, 255);
+ --color-sf-content-bg-color-alt1: #f9fafb;
+ --color-sf-content-bg-color-alt2: #f3f4f6;
+ --color-sf-content-bg-color-alt3: #e5e7eb;
+ --color-sf-content-bg-color-alt4: #9ca3af;
+ --color-sf-content-bg-color-alt5: #6b7280;
+ --color-sf-content-bg-color-hover: #f9fafb;
+ --color-sf-content-bg-color-pressed: #f3f4f6;
+ --color-sf-content-bg-color-focus: #f9fafb;
+ --color-sf-content-bg-color-selected: #e5e7eb;
+ --color-sf-content-bg-color-dragged: #f3f4f6;
+ --color-sf-content-bg-color-disabled: #ffffff;
+ --color-sf-flyout-bg-color: #ffffff;
+ --color-sf-flyout-bg-color-hover: #f3f4f6;
+ --color-sf-flyout-bg-color-pressed: #e5e7eb;
+ --color-sf-flyout-bg-color-focus: #f3f4f6;
+ --color-sf-flyout-bg-color-selected: #e5e7eb;
+ --color-sf-flyout-bg-color-disabled: #fff;
+ --color-sf-overlay-bg-color: rgba(107, 114, 128, 74.9);
+ --color-sf-table-bg-color-hover: #f9fafb;
+ --color-sf-table-bg-color-pressed: #f3f4f6;
+ --color-sf-table-bg-color-selected: #e5e7eb;
+ --color-sf-text-input-bg-color: #ffffff;
+ --color-sf-treeview-item-active-hover-bg: #e5e7eb;
+}
\ No newline at end of file
diff --git a/ej2-react/code-snippet/common/tailwind3.4-cs1/app/index.jsx b/ej2-react/code-snippet/common/tailwind3.4-cs1/app/index.jsx
new file mode 100644
index 000000000..06d4a8828
--- /dev/null
+++ b/ej2-react/code-snippet/common/tailwind3.4-cs1/app/index.jsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { useState } from 'react';
+import { ButtonComponent, CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
+import { enableRipple } from '@syncfusion/ej2-base';
+enableRipple(true);
+function App() {
+ const [isChecked, setIsChecked] = useState(false);
+
+ const handleCheckboxChange = (event) => {
+ setIsChecked(event.target.checked);
+
+ // Add or remove the classes on the body element based on the checkbox state
+ const body = document.body;
+
+ if (event.target.checked) {
+ body.classList.add('dark');
+ body.classList.add('dark');
+ } else {
+ body.classList.remove('e-dark-mode');
+ body.classList.remove('e-dark-mode');
+ }
+ };
+ return (
+ {/* Primary Button - Used to represent a primary action. */}
+
+ button
+
+ {/* Success Button - Used to represent a positive action. */}
+ button
+
+ {/* Info Button - Used to represent an informative action. */}
+ button
+
+ {/* Warning Button - Used to represent an action with caution.*/}
+ button
+
+ {/* Danger Button - Used to represent a negative action.*/}
+ button
+
+
);
+}
+export default App;
+ReactDom.render(, document.getElementById('button'));
diff --git a/ej2-react/code-snippet/common/tailwind3.4-cs1/app/index.tsx b/ej2-react/code-snippet/common/tailwind3.4-cs1/app/index.tsx
new file mode 100644
index 000000000..bb2d89311
--- /dev/null
+++ b/ej2-react/code-snippet/common/tailwind3.4-cs1/app/index.tsx
@@ -0,0 +1,47 @@
+
+import {ButtonComponent, CheckBoxComponent} from '@syncfusion/ej2-react-buttons';
+import { enableRipple } from '@syncfusion/ej2-base';
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { useState } from 'react';
+enableRipple(true);
+
+function App() {
+ const [isChecked, setIsChecked] = useState(false);
+
+ const handleCheckboxChange = (event: React.ChangeEvent) => {
+ setIsChecked(event.target.checked);
+
+ // Add or remove the class on the body element based on the checkbox state
+ if (event.target.checked) {
+ document.body.classList.add('dark');
+ document.body.classList.add('e-dark-mode');
+ } else {
+ document.body.classList.remove('dark');
+ document.body.classList.remove('e-dark-mode');
+ }
+ };
+ return (
+
+ { /* checkbox - Used to represent checkbox. */ }
+
+ { /* Primary Button - Used to represent a primary action. */ }
+ Button
+
+ { /* Success Button - Used to represent a positive action. */ }
+ Button
+
+ { /* Info Button - Used to represent an informative action. */ }
+ Button
+
+ { /* Warning Button - Used to represent an action with caution.*/ }
+ Button
+
+ { /* Danger Button - Used to represent a negative action.*/ }
+ Button
+
+
+ );
+}
+export default App;
+ReactDom.render(,document.getElementById('button'));
\ No newline at end of file
diff --git a/ej2-react/code-snippet/common/tailwind3.4-cs1/index.css b/ej2-react/code-snippet/common/tailwind3.4-cs1/index.css
new file mode 100644
index 000000000..cd656242c
--- /dev/null
+++ b/ej2-react/code-snippet/common/tailwind3.4-cs1/index.css
@@ -0,0 +1,18 @@
+button {
+ margin: 25px 5px 20px 20px;
+}
+
+#loader {
+ color: #008cff;
+ height: 40px;
+ left: 45%;
+ position: absolute;
+ top: 45%;
+ width: 30%;
+}
+.e-checkbox-wrap {
+ margin-top: 18px;
+ }
+ .dark{
+ background-color: black;
+ }
\ No newline at end of file
diff --git a/ej2-react/code-snippet/common/tailwind3.4-cs1/index.html b/ej2-react/code-snippet/common/tailwind3.4-cs1/index.html
new file mode 100644
index 000000000..6766a2b14
--- /dev/null
+++ b/ej2-react/code-snippet/common/tailwind3.4-cs1/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+ Syncfusion React Button
+
+
+
+
+
+
+
+
+
+
+
+