Boiler template with Tailwind Theme for Controls and Essential UI Kit

[Sandro Rizzetto]

I truly like the UI Kitand the great effort you made developing it, but i feel it misses last 1% to have a complete "blank template" to start a new webapp, especially if you want to use the tailwind3 Theme

Indeed I have some doubts how to organize MainLayout.razor and above all how to write app.razor with the several css needed and in which order.

Moreover if you start with a project made with Syncfusion Blazor Template Studio, choosing Tailwind3 as theme, you finish to have also Bootstrap inside, resulting a mess...

Finally my questions are:

- what do you suggest to have as mainlayout for starting with a blank template? something like

<div class="main">

    <div class="content px-4">

        @Body

    </div>

</div>

- are in app.razor needed both tailwind.css,eg

<link rel="stylesheet" rel='nofollow' href="_content/Syncfusion.Blazor.Themes/tailwind3.css" /> for theme

and

<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/30.2.5/styles/tailwind.css" rel="stylesheet"/>

that you suggest in

https://blazor.syncfusion.com/documentation/ui-kit/build-your-first-blazor-app-with-blocks#tailwind-css-configuration

- you suggest also to call: <script src="https://cdn.tailwindcss.com"></script>

but the browser issues a warning stating

(index):64 cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation

So, as you see a clean and neat template to start over with Tailwind Theme + UI Kit, should be fine.

Thanks in advance

[Gayathri Marudhai]

Hi,

If you're starting a project with Tailwind or Bootstrap, include the relevant CDN links based on your preferred framework. You can refer to this guide:  Build your first Blazor app with our blocks | Syncfusion

what do you suggest to have as mainlayout for starting with a blank template? something like
This is a good starting point for a blank layout; you can add a header or footer later as needed

are in app.razor needed both tailwind.css,eg

<link rel="stylesheet" rel='nofollow' href="_content/Syncfusion.Blazor.Themes/tailwind3.css" /> for theme

and

<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/30.2.5/styles/tailwind.css" rel="stylesheet"/>

You can use either of the two links for applying Syncfusion control styles.

However, using https://cdn.tailwindcss.com is great for quick prototyping but not recommended for production. Browsers will show a warning. For production, install Tailwind via: Post CSS plugin or Tailwind CLI

Guide: Installing Tailwind CSS with Vite - Tailwind CSS

Please let us know if you need any further assistance

Regards,
Gayathri Marudhai