Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (151).NET Core  (25)Angular  (49)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (97)DocIO  (20)Essential JS 2  (71)Essential Studio  (163)File Formats  (20)Flutter  (111)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (480)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (25)Windows Forms  (55)WinUI  (21)WPF  (122)Xamarin  (130)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (51)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (47)Development  (257)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (7)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (227)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (23)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (6)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (60)UI  (131)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (11)Web  (215)What's new  (140)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Elegantly Design Your Application with the Tailwind CSS Theme

Elegantly Design Your Web Application with the Tailwind CSS Theme

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 and Blazor platforms provide the Tailwind CSS theme in both dark and light modes. Check out our online demos 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, Gantt Chart, Pivot Table, File Manager, Inputs, and Button components) appear with the Tailwind CSS theme.

DataGrid with Tailwind CSS Light Theme
DataGrid with Tailwind CSS Light Theme
DataGrid with Tailwind CSS Dark Theme
DataGrid with Tailwind CSS Dark Theme
Gantt Chart with Tailwind CSS Light Theme
Gantt Chart with Tailwind CSS Light Theme
Gantt Chart with Tailwind CSS Dark Theme
Gantt Chart with Tailwind CSS Dark Theme
Pivot Chart with Tailwind CSS Light Theme
Pivot Chart with Tailwind CSS Light Theme
Pivot Chart with Tailwind CSS Dark Theme
Pivot Chart with Tailwind CSS Dark Theme
File Manager with Tailwind CSS Light Theme
File Manager with Tailwind CSS Light Theme
File Manager with Tailwind CSS Dark Theme
File Manager with Tailwind CSS Dark Theme
Inputs with Tailwind CSS Light Theme
Inputs with Tailwind CSS Light Theme
Inputs with Tailwind CSS Dark Theme
Inputs with Tailwind CSS Dark Theme
Buttons with Tailwind CSS Light Theme
Buttons with Tailwind CSS Light Theme
Buttons with Tailwind CSS Dark 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 Light Theme
Color Variables with Dark 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

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

Dark theme

<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 and Syncfusion.Blazor.Themes 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

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

 Dark theme

<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

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

Dark theme

<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.

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 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/<theme_name>.scss";

Note: For more details, refer 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.

Reference

Use the Tailwind CSS light and dark themes in our Blazor, JavaScript, Angular, React, Vue, JavaScript (ES5), ASP.NET Core, and ASP.NET MVC platforms.

Conclusion

Thanks for reading! In this blog post, we have discussed the Tailwind CSS theme in our Syncfusion Essential JS 2 and Blazor 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 page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features.

You can contact us through our support forum or Direct-Trac. We are always happy to assist you!

If you liked this blog post, we think you’ll also like the following articles:

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top