Introduction

Taildash (Tailwind dashboard) is Tailwind admin template with flat design and fast loading. This template is perfect for make awesome dasboard admin for your site.

Quick start

Looking to quickly add Taildash to your project? Use css, js and starter page from this package.

CSS

For developement, Copy the Tailwind stylesheets <link> and paste to your <head>.

                      
                        <!--Development css (used in all pages)-->
                        <link rel="stylesheet" href="src/css/style.css">
                      
                    

JS

Copy-paste the Alpine JS, Plugins js and Demo js <script> place the following near the end of your pages, right before the closing </body> tag. Don't forget to editing demo js with your data and paste demo js before the closing </body> tag.

                      
<!--start::Global javascript (used in all pages)-->
<script src="vendors/alpinejs/dist/cdn.min.js"></script>
<script src="vendors/flatpickr/dist/flatpickr.min.js"></script>
<script src="vendors/flatpickr/dist/plugins/rangePlugin.js"></script>
<script src="vendors/simple-datatables/dist/umd/simple-datatables.js"></script>
<script src="vendors/@yaireo/tagify/dist/tagify.js"></script>
<script src="vendors/pristinejs/dist/pristine.min.js"></script>
<!--end::Global javascript (used in all pages)-->
<!-- start::Demo javascript ( initialize global javascript ) -->
<script src="src/js/demo.js"></script>

<!--start::Vendor javascript (only on this page)-->
<script src="vendors/dropzone/dist/min/dropzone.min.js"></script>
<script src="vendors/simplemde/dist/simplemde.min.js"></script>
<script src="vendors/jsvectormap/dist/js/jsvectormap.min.js"></script>
<script src="vendors/jsvectormap/dist/maps/world.js"></script>
<script src="vendors/glightbox/dist/js/glightbox.min.js"></script>
<script src="vendors/flickity/dist/flickity.pkgd.min.js"></script>
<!-- start::Call vendor ( initialize vendor javascript ) -->
<script src="src/js/vendor.js"></script>

<script src="vendors/chart.js/dist/chart.umd.js"></script>
<!-- chart cofig -->
<script src="src/js/chart/analytics.js"></script>
<script src="src/js/chart/cms.js"></script>
<script src="src/js/chart/crm.js"></script>
<script src="src/js/chart/marketing.js"></script>
<script src="src/js/chart/sales.js"></script>
<script src="src/js/chart/projects.js"></script>
<script src="src/js/chart/saas.js"></script>
<script src="src/js/chart/ecommerce.js"></script>
                      
                    

Development starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:

                      
                        <!doctype html>
                        <html lang="en">
                          <head>
                            <!-- Title -->
                            <title>Hello, world!</title>

                            <!-- Required meta tags -->
                            <meta charset="UTF-8">
                            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                            <!-- Favicon  -->
                            <link rel="icon" href="../src/img/favicon.png">

                            <!--Google Fonts-->
                            <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">

                            <!--Development css (used in all pages)-->
                            <link rel="stylesheet" href="src/css/style.css">
                          </head>

                          <body class="font-sans text-base font-normal text-gray-700">
                            <h1>Hello, world!</h1>

                            <!--start::Global javascript (used in all pages)-->
                            <script src="vendors/alpinejs/dist/cdn.min.js"></script>
                            <script src="vendors/flatpickr/dist/flatpickr.min.js"></script>
                            <script src="vendors/flatpickr/dist/plugins/rangePlugin.js"></script>
                            <script src="vendors/simple-datatables/dist/umd/simple-datatables.js"></script>
                            <script src="vendors/@yaireo/tagify/dist/tagify.js"></script>
                            <script src="vendors/pristinejs/dist/pristine.min.js"></script>
                            <!--end::Global javascript (used in all pages)-->

                            <!-- start::Demo javascript ( initialize global javascript ) -->
                            <script src="src/js/demo.js"></script>

                            <!--start::Vendor javascript (only on this page)-->
                            <script src="vendors/dropzone/dist/min/dropzone.min.js"></script>
                            <script src="vendors/simplemde/dist/simplemde.min.js"></script>
                            <script src="vendors/jsvectormap/dist/js/jsvectormap.min.js"></script>
                            <script src="vendors/jsvectormap/dist/maps/world.js"></script>
                            <script src="vendors/glightbox/dist/js/glightbox.min.js"></script>
                            <script src="vendors/flickity/dist/flickity.pkgd.min.js"></script>
                            <!--end::Vendor javascript (only on this page)-->

                            <!-- start::Call vendor ( initialize vendor javascript ) -->
                            <script src="src/js/vendor.js"></script>
                          </body>
                        </html>
                        
                      
                    

Starter template

This is starter template with production files.

                      
                        <!doctype html>
                        <html lang="en">
                          <head>
                            <!-- Title -->
                            <title>Hello, world!</title>

                            <!-- Required meta tags -->
                            <meta charset="UTF-8">
                            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                            <!-- Favicon  -->
                            <link rel="icon" href="../src/img/favicon.png">

                            <!--Google Fonts-->
                            <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">

                            <!--Styles-->
                            <link rel="stylesheet" href="dist/css/style.css">
                          </head>

                          <body class="font-sans text-base font-normal text-gray-700">
                            <h1>Hello, world!</h1>

                            <!--start::Global javascript (used in all pages)-->
                            <script src="dist/js/scripts.js"></script>

                            <!--start::Demo javascript ( initialize global javascript )-->
                            <script src="src/js/demo.js"></script>

                            <!--start::Insert your vendors and custom javascript in here-->
                          </body>
                        </html>
                        
                      
                    

RTL starter template

This is starter template with rtl production files.

                      
                        <!doctype html>
                        <html lang="ar" dir="ltr">
                          <head>
                            <!-- Title -->
                            <title>Hello, world!</title>

                            <!-- Required meta tags -->
                            <meta charset="UTF-8">
                            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

                            <!-- Favicon  -->
                            <link rel="icon" href="../src/img/favicon.png">

                            <!--Google Fonts-->
                            <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">

                            <!--Styles-->
                            <link rel="stylesheet" href="dist/css/style.css">
                          </head>

                          <body class="font-sans text-base font-normal text-gray-700">
                            <h1>Hello, world!</h1>

                            <!--start::Global javascript (used in all pages)-->
                            <script src="dist/js/scripts.js"></script>

                            <!--start::Demo javascript ( initialize global javascript )-->
                            <script src="src/js/demo.js"></script>

                            <!--start::Insert your vendors and custom javascript in here-->
                          </body>
                        </html>