---
title: "Elegantly Design Your Web Application with the Tailwind CSS Theme"
published_at: "2021-09-24T10:30:19+00:00"
modified_at: "2025-04-22T08:38:11+00:00"
url: "https://www.syncfusion.com/blogs/post/elegantly-design-your-web-application-with-the-tailwind-css-theme"
excerpt: "Themes are an essential part of an application. They help us design our apps with colors, styles, icons, and more. Right now, the Tailwind CSS theme is one of the trending CSS frameworks used in developing modern web applications. It..."
taxonomy_category:
- "Blazor"
- "Essential JS 2"
- "Syncfusion"
- "Theme"
- "UI"
- "Web"
taxonomy_post_tag:
- "Blazor"
- "JavaScript"
- "Syncfusion"
- "Tailwind CSS"
- "Web Development"
---
# Elegantly Design Your Web Application with the Tailwind CSS Theme
[Piramanayagam Ramakrishnan](https://www.syncfusion.com/blogs/author/piramanayagamr)
Themes are an essential part of an application. They help us design our apps with colors, styles, icons, and more.
Right now, the Tailwind CSS theme is one of the trending CSS frameworks used in developing modern web applications. It contains predefined CSS helper classes to develop an app with less CSS.
Our Syncfusion [Essential JS 2](https://www.syncfusion.com/javascript-ui-controls)
and [Blazor](https://www.syncfusion.com/blazor-components)
platforms provide the Tailwind CSS theme in both dark and light modes. Check out our [online demos](https://blazor.syncfusion.com/demos/datagrid/overview?theme=tailwind)
to view the appearance of the Syncfusion components in Tailwind CSS themes.
Let’s see how to use this theme in your web applications by looking at code examples.
## Tailwind CSS themes
Here is how some of our frequently used components ([DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid)
, [Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart)
, [Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table)
, [File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager)
, Inputs, and Button components) appear with the Tailwind CSS theme.
DataGrid with Tailwind CSS Light Theme
DataGrid with Tailwind CSS Dark Theme
Gantt Chart with Tailwind CSS Light Theme
Gantt Chart with Tailwind CSS Dark Theme
Pivot Chart with Tailwind CSS Light Theme
Pivot Chart with Tailwind CSS Dark Theme
File Manager with Tailwind CSS Light Theme
File Manager with Tailwind CSS Dark Theme
Inputs with Tailwind CSS Light Theme
Inputs with Tailwind CSS Dark Theme
Buttons with Tailwind CSS Light Theme
Buttons with Tailwind CSS Dark Theme
## Color variables
Syncfusion’s Tailwind CSS theme uses **indigo** as the primary color and the rest of the colors are selected based on it.
Refer to the following screenshots. We have listed the common color variables used in the Syncfusion Tailwind CSS themes for all UI components.
Color Variables with Light Theme
Color Variables with Dark Theme
## Blazor components
If you want to try out the Tailwind CSS theme in your Blazor application, then you can use either CDN or static assets like NuGet packages.
Refer to the following code examples to use the Tailwind CSS themes using CDN.
### **Light theme**
```
....
....
```
### **Dark theme**
```
....
....
```
The Syncfusion Blazor themes are available as static web assets in [Syncfusion.Blazor](https://www.nuget.org/packages/Syncfusion.Blazor/)
and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/)
NuGet packages.
Add the following reference link inside the element of the **~/Pages/_Host.cshtml** file for the Blazor server app or the **~/wwwroot/index.html** file for the Blazor WebAssembly app.
- If you are using individual NuGet packages in your application, then use the following reference link.
### **Light theme**
```
....
....
```
### **Dark theme**
```
....
....
```
- If you are using **Blazor** NuGet package in your application, then use the following reference link.
### **Light theme**
```
....
....
```
### **Dark theme**
```
....
....
```
**Note:** For more details, refer to the [Themes in Syncfusion Blazor Components documentation](https://blazor.syncfusion.com/documentation/appearance/themes)
.
## Essential JS 2 components
For the Essential JS 2 suite, the themes are available in the individual and combined CSS files. You can get the combined CSS file from the [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2)
npm package and individual CSS files within the same control repository’s **style** folder.
The ej2 npm packages have both the CSS and SCSS files for all controls.
Refer to the following code examples.
### **Light theme**
```
@import "./node_modules/@syncfusion/ej2/tailwind.css";
```
### **Dark theme**
```
@import "./node_modules/@syncfusion/ej2/tailwind-dark.css";
```
### **All controls SCSS**
```
@import "ej2/.scss";
```
**Note:** For more details, refer to [Theming in Essential JS 2 Components documentation](https://ej2.syncfusion.com/documentation/appearance/theme/)
.
## Custom resource generator
You can generate a selective control script (JavaScript ES5) and styles by using the **custom resource**** generator** (CRG). It allows you to download the Tailwind CSS and Tailwind CSS dark themes from CRG.
**Note:** For more details, refer to the [Custom Resource Generator demo](https://crg.syncfusion.com/)
.
## Reference
Use the Tailwind CSS light and dark themes in our [Blazor](https://blazor.syncfusion.com/demos/datagrid/overview?theme=tailwind)
, [JavaScript](https://ej2.syncfusion.com/demos/#/tailwind/grid/grid-overview.html)
, [Angular](https://ej2.syncfusion.com/angular/demos/#/tailwind/grid/over-view)
, [React](https://ej2.syncfusion.com/react/demos/#/tailwind/grid/over-view)
, [Vue](https://ej2.syncfusion.com/vue/demos/#/tailwind/grid/grid-overview.html)
, [JavaScript (ES5)](https://ej2.syncfusion.com/javascript/demos/#/tailwind/grid/grid-overview.html)
, [ASP.NET Core](https://ej2.syncfusion.com/aspnetcore/Grid/GridOverview#/tailwind)
, and [ASP.NET MVC](https://ej2.syncfusion.com/aspnetmvc/Grid/GridOverview#/tailwind)
platforms.
## Conclusion
Thanks for reading! In this blog post, we have discussed the Tailwind CSS theme in our Syncfusion [Essential JS 2](https://www.syncfusion.com/javascript-ui-controls)
and [Blazor](https://www.syncfusion.com/blazor-components)
components and how to use them in your application. We will keep on providing new, standard themes.
For existing customers, the new version of Essential Studio® is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads)
page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads)
to check out our available features.
You can contact us through our [support forum](https://www.syncfusion.com/forums)
or [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/)
. We are always happy to assist you!
If you liked this blog post, we think you’ll also like the following articles:
- [Schedule Your Tasks Like A Pro in Blazor Applications](https://www.syncfusion.com/blogs/post/schedule-your-tasks-like-a-pro-in-blazor-applications.aspx) [Blog]
- [Authentication Support in Syncfusion Blazor Template Studio: A Complete Guide](https://www.syncfusion.com/blogs/post/authentication-support-in-syncfusion-blazor-template-studio-a-complete-guide.aspx) [Blog]
- [Boosting JavaScript Tree Grid Performance with Virtualization](https://www.syncfusion.com/blogs/post/boosting-javascript-tree-grid-performance-virtualization.aspx) [Blog]
- [Succinctly series](https://www.syncfusion.com/succinctly-free-ebooks) [Ebooks]