Elegantly Design Your Web Application with the Tailwind CSS Theme
Tags: blazor, webdev, csharp, javascript
Published: 2021-10-04 06:19:55

---
title: Elegantly Design Your Web Application with the Tailwind CSS Theme
published: true
date: 2021-09-24 10:30:19 UTC
tags: blazor, webdev, csharp, javascript
canonical_url: https://www.syncfusion.com/blogs/post/elegantly-design-your-web-application-with-the-tailwind-css-theme.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebeogofz4lpszqxdzegx.png
---

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 "Link to Essential JS 2 - The Pure JavaScript UI Controls Library") and [Blazor](https://www.syncfusion.com/blazor-components "Link to Blazor UI Controls") 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 "Link to Blazor DataGrid Example - Overview")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 "Link to Blazor DataGrid control"), [Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "Link to Blazor Gantt Chart"), [Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table "Link to Blazor Pivot Table"), [File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager "Link to Blazor File Manager"), Inputs, and Button components) appear with the Tailwind CSS theme.

![DataGrid with Tailwind CSS Light Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/DataGrid-with-Tailwind-CSS-Light-Theme.png)<figcaption>DataGrid with Tailwind CSS Light Theme</figcaption>

![DataGrid with Tailwind CSS Dark Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/DataGrid-with-Tailwind-CSS-Dark-Theme.png)<figcaption>DataGrid with Tailwind CSS Dark Theme</figcaption>

![Gantt Chart with Tailwind CSS Light Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Gantt-Chart-with-Tailwind-CSS-Light-Theme.png)<figcaption>Gantt Chart with Tailwind CSS Light Theme</figcaption>

![Gantt Chart with Tailwind CSS Dark Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Gantt-Chart-with-Tailwind-CSS-Dark-Theme.png)<figcaption>Gantt Chart with Tailwind CSS Dark Theme</figcaption>

![Pivot Chart with Tailwind CSS Light Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Pivot-Chart-with-Tailwind-CSS-Light-Theme.png)<figcaption>Pivot Chart with Tailwind CSS Light Theme</figcaption>

![Pivot Chart with Tailwind CSS Dark Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Pivot-Chart-with-Tailwind-CSS-Dark-Theme.png)<figcaption>Pivot Chart with Tailwind CSS Dark Theme</figcaption>

![File Manager with Tailwind CSS Light Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/File-Manager-with-Tailwind-CSS-Light-Theme.png)<figcaption>File Manager with Tailwind CSS Light Theme</figcaption>

![File Manager with Tailwind CSS Dark Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/File-Manager-with-Tailwind-CSS-Dark-Theme.png)<figcaption>File Manager with Tailwind CSS Dark Theme</figcaption>

![Inputs with Tailwind CSS Light Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Inputs-with-Tailwind-CSS-Light-Theme.png)<figcaption>Inputs with Tailwind CSS Light Theme</figcaption>

![Inputs with Tailwind CSS Dark Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Inputs-with-Tailwind-CSS-Dark-Theme.png)<figcaption>Inputs with Tailwind CSS Dark Theme</figcaption>

![Buttons with Tailwind CSS Light Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Buttons-with-Tailwind-CSS-Light-Theme.png)<figcaption>Buttons with Tailwind CSS Light Theme</figcaption>

![Buttons with Tailwind CSS Dark Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Buttons-with-Tailwind-CSS-Dark-Theme.png)<figcaption>Buttons with Tailwind CSS Dark Theme</figcaption>

## Color variables

Syncfusion’s Tailwind CSS theme uses **indigo blue** 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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Color-Variable-with-Light-Theme.png)<figcaption>Color Variables with Light Theme</figcaption>

![Color Variables with Dark Theme](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Color-Variables-with-Dark-Theme.png)<figcaption>Color Variables with Dark Theme</figcaption>

## 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**

```html
<head>
    ....
    ....
    <link href="https://cdn.syncfusion.com/blazor/19.2.55/styles/tailwind.css" rel="stylesheet" />
</head>
```

### **Dark theme**

```html
<head>
    ....
    ....
    <link href=" https://cdn.syncfusion.com/blazor/19.2.55/styles/tailwind-dark.css" rel="stylesheet" />
</head>
```

The Syncfusion Blazor themes are available as static web assets in the [**Syncfusion.Blazor**](https://www.nuget.org/packages/Syncfusion.Blazor/ "Link to Syncfusion.Blazor NuGet package") and [**Syncfusion.Blazor.Themes**](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/ "Link to Syncfusion.Blazor.Themes NuGet package") NuGet packages.

Add the following reference link inside the <head> 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**

```html
<head>
    ....
    ....
    <link href="_content/Syncfusion.Blazor.Themes/tailwind.css" rel="stylesheet" />
</head>
```

### ** Dark theme**

```html
<head>
    ....
    ....
    <link href="_content/Syncfusion.Blazor.Themes/tailwind-dark.css" rel="stylesheet" />
</head>
```

- If you are using **Blazor** NuGet package in your application, then use the following reference link.

### **Light theme**

```html
<head>
    ....
    ....
    <link href="_content/Syncfusion.Blazor/styles/tailwind.css" rel="stylesheet" />
</head>
```

### **Dark theme**

```html
<head>
    ....
    ....
    <link href="_content/Syncfusion.Blazor/styles/tailwind-dark.css" rel="stylesheet" />
</head>
```

**Note:** For more details, refer to the [Themes in Syncfusion Blazor Components documentation](https://blazor.syncfusion.com/documentation/appearance/themes "Link to Themes in Syncfusion Blazor Components documentation").

## 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 "Link to @syncfusion/ej2 npm package") 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**

```js
@import "./node_modules/@syncfusion/ej2/tailwind.css";
```

### **Dark theme**

```js
@import "./node_modules/@syncfusion/ej2/tailwind-dark.css";
```

### **All controls SCSS**

```js
@import "ej2/<theme_name>.scss";
```

**Note:** For more details, refer to [Theming in Essential JS 2 Components documentation](https://ej2.syncfusion.com/documentation/appearance/theme/ "Link to Theming in Essential JS 2 Components documentation").

## 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/ "Link to Custom Resource Generator for Essential JS 2 demo").

## Reference

Use the Tailwind CSS light and dark themes in our [Blazor](https://blazor.syncfusion.com/demos/datagrid/overview?theme=tailwind "Link to Blazor DataGrid Example - Overview"), [JavaScript](https://ej2.syncfusion.com/demos/#/tailwind/grid/grid-overview.html "Link to JavaScript DataGrid Example"), [Angular](https://ej2.syncfusion.com/angular/demos/#/tailwind/grid/over-view "Link to Angular DataGrid Example"), [React](https://ej2.syncfusion.com/react/demos/#/tailwind/grid/over-view "Link to React DataGrid Example"), [Vue](https://ej2.syncfusion.com/vue/demos/#/tailwind/grid/grid-overview.html "Link to Vue DataGrid Example"), [JavaScript (ES5)](https://ej2.syncfusion.com/javascript/demos/#/tailwind/grid/grid-overview.html "Link to JavaScript (ES5) DataGrid Example"), [ASP.NET Core](https://ej2.syncfusion.com/aspnetcore/Grid/GridOverview#/tailwind "Link to ASP.NET Core DataGrid Example"), and [ASP.NET MVC](https://ej2.syncfusion.com/aspnetmvc/Grid/GridOverview#/tailwind "Link to ASP.NET MVC DataGrid Example") 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 "Link to Essential JS 2 - The Pure JavaScript UI Controls Library") and [Blazor](https://www.syncfusion.com/blazor-components "Link to Blazor UI Controls") 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 "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features.

You can contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum") or [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/ "Link to the Syncfusion support system Direct Trac"). 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://dev.to/karthickramasamy08/schedule-your-tasks-like-a-pro-in-blazor-applications-d77-temp-slug-6326719 "Link to Schedule Your Tasks Like A Pro in Blazor Applications blog") [Blog]
- [Authentication Support in Syncfusion Blazor Template Studio: A Complete Guide](https://dev.to/sureshmohan/authentication-support-in-syncfusion-blazor-template-studio-a-complete-guide-58j-temp-slug-1598912 "Link to Authentication Support in Syncfusion Blazor Template Studio: A Complete Guide blog") [Blog]
- [Boosting JavaScript Tree Grid Performance with Virtualization](https://dev.to/syncfusion/boosting-javascript-tree-grid-performance-with-virtualization-4589 "Link to Boosting JavaScript Tree Grid Performance with Virtualization blog") [Blog]
- [_Succinctly_ series](https://www.syncfusion.com/succinctly-free-ebooks "Link to Syncfusion Succinctly Series E-Books") [Ebooks]