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>