Introduction

Dashpro is a fast-loading HTML Tailwind admin template with a clean, flat design. It’s perfect for building impressive admin dashboards for your website.

Quick Start

To quickly get started with Dashpro, follow the steps below:

  • Tools needed: Code editor (VS Code), Node js and NPM
  • Open project from terminal/code editor: dashpro
  • Install dependencies: Run npm install to install the required packages.
  • Start the development server: Run npm run dev to start the server at http://localhost:3100.
  • Build for production: Run npm run build to generate production files in the /dist/css/ folder.

CSS

For development, include the Tailwind stylesheets by copying the following <link> tag and pasting it into the <head> section of your HTML:

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

Starter template

This is Html starter template.

                  
                    <!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+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">

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

                      <body class="font-sans text-base font-normal text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-900">
                        <h1>Hello, world!</h1>

                        <!-- Alpine Plugins -->
                        <script defer src="../vendors/@alpinejs/collapse/dist/cdn.min.js"></script>
                        <!-- Alpine Core -->
                        <script defer src="../vendors/alpinejs/dist/cdn.min.js"></script>

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