Docs - Dashwind Multipurpose Tailwind Admin Dashboard Template.

Introduction

Welcome to Dashwind - Multipurpose Tailwind Admin Dashboard Template.

Created: 16/10/2024
Author: Softnio
Profile: http://themeforest.net/user/softnio
Contact: Support Center

Dashwind - is a responsive web application dashboard template. It is fully flexible user-friendly and responsive template that looks great on Desktops, Tablets, and Mobile Devices.

HTML Version

This template built with Tailwind, HTML5, and Vanilla Js.

React Version

This template built with Tailwind, React.js, and Headlessui.

This helps you to create your application stress free and quickly. If you like our template. please don't forgot to rate it. Thank you so much!

Quick Start

Installing Node.js

1. Download the latest theme source from themeforest.
2. Download and install Node.js from nodejs.org (if you dont have it installed)
3. Start command prompt window or terminal and go to [html] under [dashwind-template] folder.
```
cd html
```
4. Run following command to install all the "dependencies and devDependencies". It could take few minutes to complete installation.
```
npm install
```
5. After done with installation, run the following command to compile all the files in watch mood, keep running the command to compile you edit.
```
npm run dev
```
5. Run the following command to compile all the assets(css, js, media) and copy HTML templates to a new folder called [dist] in same directory.
```
npm run build
```

You must use this build tool to compile as tailwind needs to re-generate css after any kind of changes in markup.

File and Folder Structure

    
    |--docs/
    |--html/
    |--|--src/
    |--|--|--assets/
    |--|--|--|--fonts/
    |--|--|--css/
    |--|--|--|--bundles/
    |--|--|--|--custom/
    |--|--|--|--app.css/
    |--|--|--html/
    |--|--|--|--components/
    |--|--|--|--pages/
    |--|--|--|--index.html
    |--|--|--images/
    |--|--|--|--avatar/
    |--|--|--js/
    |--|--|--|--addon/
    |--|--|--|--app/
    |--|--|--|--chart/
    |--|--|--|--component/
    |--|--|--|--function/
    |--|--|--|--apps.js
    |--|--|--|--charts.js
    |--|--|--|--scripts.js
    |--|--|--package.json
    |--|--|--postcss.config.js
    |--|--|--tailwind.config.js
    |--|--|--webpack.config.js

HTML structure

This is a basic HTML Structure.


<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Softnio">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="A powerful and conceptual apps base dashboard template that especially build for developers and programmers.">
    <!-- Fav Icon  -->
    <link rel="shortcut icon" href="images/favicon.png">
    <title>DashWind | Multipurpose Tailwind Admin Dashboard Template </title>
    <link rel="stylesheet" href="assets/css/app.css?v1.0.0">
</head>
<body class="bg-gray-50 dark:bg-gray-1000 font-body text-sm leading-relaxed text-slate-600 dark:text-slate-300 font-normal min-w-[320px]">
    <div class="nk-app-root">
        <div class="nk-main">
            <div class="nk-sidebar group/sidebar peer dark fixed w-72 [&.is-compact:not(.has-hover)]:w-[74px] min-h-screen max-h-screen overflow-hidden h-full start-0 top-0 z-[1031] transition-all duration-300 -translate-x-full rtl:translate-x-full xl:translate-x-0 xl:rtl:translate-x-0 [&.sidebar-visible]:translate-x-0">
                ...
            </div><!-- sidebar -->
            <div class="nk-wrap xl:ps-72 [&>.nk-header]:xl:start-72 [&>.nk-header]:xl:w-[calc(100%-theme(spacing.72))] peer-[&.is-compact:not(.has-hover)]:xl:ps-[74px] peer-[&.is-compact:not(.has-hover)]:[&>.nk-header]:xl:start-[74px] peer-[&.is-compact:not(.has-hover)]:[&>.nk-header]:xl:w-[calc(100%-74px)] flex flex-col min-h-screen transition-all duration-300">
                <div class="nk-header fixed start-0 w-full h-16 top-0 z-[1021] transition-all duration-300 min-w-[320px]">
                    ...
                </div><!-- header -->
                <div class="nk-content mt-16  px-1.5 sm:px-5 py-6 sm:py-8">
                    ...
                </div><!-- content -->
                <div class="w-full min-w-[320px] mt-auto border-t bg-white dark:bg-gray-950 border-gray-200 dark:border-gray-900 px-1.5 sm:px-5 py-5">
                    ...
                </div><!-- footer -->
            </div>
        </div>
    </div><!-- root -->
    <div id="region" class="modal group fixed inset-0 flex items-center py-5 px-3 transition-all duration-500 bg-slate-700 bg-opacity-50 opacity-0 invisible [&.show]:visible [&.show]:opacity-100 z-[5000]">
        ...
    </div><!-- modal -->
    <!-- JavaScript -->
    <script src="assets/js/scripts.js?v1.0.0"></script>
</body>
</html>

CSS

We have created all the css files in the src/css folder.

File Structure

    
    |--html/
    |--|--src/
    |--|--|--css/
    |--|--|--|--bundles/
    |--|--|--|--|--[folder-name]/[file-name].css
    |--|--|--|--custom/
    |--|--|--|--|--[folder-name]/[file-name].css
    |--|--|--|--|--[file-name].css
    |--|--|--|--app.css/

Tailwind Config


/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
    "**.html", 
    "./src/html/**", 
    "./src/html/**.html", 
    "./src/html/**/**.html", 
    "./src/html/**/**/**.html", 
    "./src/html/**/**/**/**.html", 
    "./src/html/**/**/**/**/**.html",
    "./src/js/**.js", 
    "./src/js/**/**.js", 
    "./src/js/**/**/**.js", 
],
darkMode: 'class',
theme: {
    extend: {
        screens: {
            'xs': '480px',
        },
        container: {
            center: true,
            padding: '.5rem',
        },
        fontFamily: {
            'body': ["Roboto", "sans-serif"],
            'heading': ["Nunito", "sans-serif"],
            'nioicon': ["Nioicon"]
        },
        fontSize: {
            'xxs':'11px',
        },
        lineHeight:{
            'tighter' : '1.1',
            '3.5': '0.875rem',
            '4.5': '1.125rem',
            '5.5': '1.375rem',
            '6.5': '1.625rem',
        },
        letterSpacing: {
            'snug': '0.01em',
            'relaxed': '0.2em'
        },
        colors: {
            primary:{
                50: '#f7f8ff',
                100: '#eff1ff',
                200: '#e3e7fe',
                300: '#c4cefe',
                400: '#9cabff',
                500: '#798bff',
                600: '#6576ff',
                700: '#5664d9',
                800: '#465fff',
                900: '#2c3782',
                950: '#29347a',
            },
            green:{
                50: '#e9fcf7',
                100: '#e6fcf6',
                200: '#bcf6e6',
                300: '#a5f3de',
                400: '#78eccd',
                500: '#4be6bd',
                600: '#1ee0ac',
                700: '#18b38a',
                800: '#128667',
                900: '#0c5a45',
                950: '#062d22',
            },
            yellow:{
                50: '#fef8e7',
                100: '#fef8e4',
                200: '#fcebb7',
                300: '#fbe59f',
                400: '#f8d76e',
                500: '#f6ca3e',
                600: '#f4bd0e',
                700: '#c3970b',
                800: '#927108',
                900: '#624c06',
                950: '#312603',
            },
            red:{
                50: '#fdeeed',
                100: '#fceceb',
                200: '#f8cbc8',
                300: '#f6bab5',
                400: '#f19891',
                500: '#ed756c',
                600: '#e85347',
                700: '#ba4239',
                800: '#8b322b',
                900: '#2e110e',
                950: '#2e110e',
            },
            cyan:{
                50: '#e6f9fc',
                100: '#e4f8fb',
                200: '#b5edf5',
                300: '#9de7f2',
                400: '#6bdaeb',
                500: '#3acee5',
                600: '#09c2de',
                700: '#079bb2',
                800: '#057485',
                900: '#044e59',
                950: '#02272c',
            },
            slate:{
                50: '#f5f7fd',
                100: '#ecf2ff',
                200: '#dfe9fe',
                300: '#b6c6e3',
                400: '#8094ae',
                500: '#6e82a5',
                600: '#526484',
                700: '#364a63',
                800: '#203145',
                900: '#1c2b46',
                950: '#131f34',
            },
            gray: {
                50: '#f7fafc',
                100: '#ebeef2',
                200: '#e5e9f2',
                300: '#dbdfea',
                400: '#b7c2d0',
                500: '#8091a7',
                600: '#3c4d62',
                700: '#344357',
                800: '#2b3748',
                900: '#1f2b3a',
                950: '#101924',
                1000: '#0d141d',
            },
        },
        spacing: {
            '0.75': '0.1875rem',
            '4.5': '1.125rem',
            '5.5': '1.375rem',
            '6.5': '1.625rem',
            '7.5': '1.875rem',
            '13': '3.25rem',
            '15': '3.75rem',
            '17': '4.25rem',
            '18': '4.5rem',
            '19': '4.75rem',
        },
        borderWidth: {
            '3': '3px',
            '5': '5px',
            '6': '6px',
            '7': '7px',
        }
    },
},
plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
],
}

checkout tailwind docs for configration optins

Javascript

This template is built with es6 module system, you can just keep, add or remove import and initialization code in src/js/script.js file.

File structure

    
    |--html/
    |--|--src/
    |--|--|--js/
    |--|--|--|--addon/
    |--|--|--|--app/
    |--|--|--|--|--messages.js
    |--|--|--|--chart/
    |--|--|--|--|--Line.js
    |--|--|--|--|--Bar.js
    |--|--|--|--component/
    |--|--|--|--function/
    |--|--|--|--apps.js
    |--|--|--|--charts.js
    |--|--|--|--scripts.js

If you are not familiar with javascript, then it is hightly recommended do not make any changes to core JS files. because it may get error if you make any changes inside the core js files.

Dark Mode

We are using class option for dark mode, You just need add .dark class on html tag.

Also we are saving our theme with localStorage, so it's has a flicker on load. you need to make it functional with programming language of your choice.

Change in tailwind.config.js

    
darkMode: 'class'
//
darkMode: 'media'

If you want to support toggling dark mode automatically, then use the 'media' strategy instead of the 'class' strategy:

Quick Start

React js Project with vite

1. Download the latest theme source from themeforest.
2. Download and install Node.js from nodejs.org (if you dont have it installed)
3. Start command prompt window or terminal and go to [react] under [dashwind-template] folder.
```
cd react
```
4. Run following command to install all the "dependencies and devDependencies". It could take few minutes to complete installation.
```
npm install
```
5. Run dev server
```
npm run dev
```
5. Run Production Build
```
npm run build
```

For more information about vite checkout here

File and Folder Structure

    
    |--react/
    |--|--public/
    |--|--|--images/
    |--|--|--logo.png
    |--|--src/
    |--|--|--assets/
    |--|--|--|--fonts/
    |--|--|--|--css/
    |--|--|--|--|--bundles/
    |--|--|--|--|--app.css
    |--|--|--|--index.html
    |--|--|--components/
    |--|--|--App.jsx
    |--|--|--main.jsx
    |--|--index.html
    |--|--package.json
    |--|--postcss.config.js
    |--|--tailwind.config.js
    |--|--vite.config.js

CSS

We have created all the css files in the src/assets/css folder.

File Structure

    
    |--react/
    |--|--src/
    |--|--|--assets/
    |--|--|--|--css/
    |--|--|--|--|--bundles/
    |--|--|--|--|--|--[folder-name]/[file-name].css
    |--|--|--|--|--custom/
    |--|--|--|--|--|--[folder-name]/[file-name].css
    |--|--|--|--|--|--[file-name].css
    |--|--|--|--|--app.css/

Tailwind Config


/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: 'class',
theme: {
    extend: {
        screens: {
            'xs': '480px',
        },
        container: {
            center: true,
            padding: '.5rem',
        },
        fontFamily: {
            'body': ["Roboto", "sans-serif"],
            'heading': ["Nunito", "sans-serif"],
            'nioicon': ["Nioicon"]
        },
        fontSize: {
            'xxs':'11px',
        },
        lineHeight:{
            'tighter' : '1.1',
            '3.5': '0.875rem',
            '4.5': '1.125rem',
            '5.5': '1.375rem',
            '6.5': '1.625rem',
        },
        letterSpacing: {
            'snug': '0.01em',
            'relaxed': '0.2em'
        },
        colors: {
            primary:{
                50: '#f7f8ff',
                100: '#eff1ff',
                200: '#e3e7fe',
                300: '#c4cefe',
                400: '#9cabff',
                500: '#798bff',
                600: '#6576ff',
                700: '#5664d9',
                800: '#465fff',
                900: '#2c3782',
                950: '#29347a',
            },
            green:{
                50: '#e9fcf7',
                100: '#e6fcf6',
                200: '#bcf6e6',
                300: '#a5f3de',
                400: '#78eccd',
                500: '#4be6bd',
                600: '#1ee0ac',
                700: '#18b38a',
                800: '#128667',
                900: '#0c5a45',
                950: '#062d22',
            },
            yellow:{
                50: '#fef8e7',
                100: '#fef8e4',
                200: '#fcebb7',
                300: '#fbe59f',
                400: '#f8d76e',
                500: '#f6ca3e',
                600: '#f4bd0e',
                700: '#c3970b',
                800: '#927108',
                900: '#624c06',
                950: '#312603',
            },
            red:{
                50: '#fdeeed',
                100: '#fceceb',
                200: '#f8cbc8',
                300: '#f6bab5',
                400: '#f19891',
                500: '#ed756c',
                600: '#e85347',
                700: '#ba4239',
                800: '#8b322b',
                900: '#2e110e',
                950: '#2e110e',
            },
            cyan:{
                50: '#e6f9fc',
                100: '#e4f8fb',
                200: '#b5edf5',
                300: '#9de7f2',
                400: '#6bdaeb',
                500: '#3acee5',
                600: '#09c2de',
                700: '#079bb2',
                800: '#057485',
                900: '#044e59',
                950: '#02272c',
            },
            slate:{
                50: '#f5f7fd',
                100: '#ecf2ff',
                200: '#dfe9fe',
                300: '#b6c6e3',
                400: '#8094ae',
                500: '#6e82a5',
                600: '#526484',
                700: '#364a63',
                800: '#203145',
                900: '#1c2b46',
                950: '#131f34',
            },
            gray: {
                50: '#f7fafc',
                100: '#ebeef2',
                200: '#e5e9f2',
                300: '#dbdfea',
                400: '#b7c2d0',
                500: '#8091a7',
                600: '#3c4d62',
                700: '#344357',
                800: '#2b3748',
                900: '#1f2b3a',
                950: '#101924',
                1000: '#0d141d',
            },
        },
        spacing: {
            '0.75': '0.1875rem',
            '4.5': '1.125rem',
            '5.5': '1.375rem',
            '6.5': '1.625rem',
            '7.5': '1.875rem',
            '13': '3.25rem',
            '15': '3.75rem',
            '17': '4.25rem',
            '18': '4.5rem',
            '19': '4.75rem',
        },
        borderWidth: {
            '3': '3px',
            '5': '5px',
            '6': '6px',
            '7': '7px',
        }
    },
},
plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@headlessui/tailwindcss'),
],
}

checkout tailwind docs for configration optins

Quick Start

Laravel Project with vite

1. Download the latest theme source from themeforest.
2. Start command prompt window or terminal and go to [laravel] under [dashwind-template] folder.
3. Install composer.
```
composer install
```
4. Find .env.example file at root folder and copy it as .env by running below command. Or you can manually copy it in .env file:
```
cp .env.example .env
```
5. Generate the key
```
php artisan key:generate
```
6. Install node dependency:
```
npm install
```
7. Build assets with vite
```
npm run build
```
8. To serve the application, please run the following command in the project directory
```
php artisan serve
```
9. To watch the changes in JavaScript and Styles files, Run following command in the root directory:
```
npm run dev
```

For more information checkout laravel docs

File and Folder Structure

    
    |--laravel/
    |--|--app/
    |--|--bootstrap/
    |--|--config/
    |--|--database/
    |--|--public/
    |--|--|--images/
    |--|--|--favico.ico
    |--|--resources/
    |--|--routes/
    |--|--storage/
    |--|--tests/
    |--|--composer.json
    |--|--package.json
    |--|--postcss.config.js
    |--|--tailwind.config.js
    |--|--vite.config.js

CSS

We have added all the css files in the laravel/resources/css folder.

File Structure

    
    |--laravel/
    |--|--resources/
    |--|--|--css/
    |--|--|--|--bundles/
    |--|--|--|--|--[folder-name]/[file-name].css
    |--|--|--|--custom/
    |--|--|--|--|--[folder-name]/[file-name].css
    |--|--|--|--|--[file-name].css
    |--|--|--|--app.css/

Tailwind Config


/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './storage/framework/views/*.php',
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
],
darkMode: 'class',
theme: {
    extend: {
        screens: {
            'xs': '480px',
        },
        container: {
            center: true,
            padding: '.5rem',
        },
        fontFamily: {
            'body': ["Roboto", "sans-serif"],
            'heading': ["Nunito", "sans-serif"],
            'nioicon': ["Nioicon"]
        },
        fontSize: {
            'xxs':'11px',
        },
        lineHeight:{
            'tighter' : '1.1',
            '3.5': '0.875rem',
            '4.5': '1.125rem',
            '5.5': '1.375rem',
            '6.5': '1.625rem',
        },
        letterSpacing: {
            'snug': '0.01em',
            'relaxed': '0.2em'
        },
        colors: {
            primary:{
                50: '#f7f8ff',
                100: '#eff1ff',
                200: '#e3e7fe',
                300: '#c4cefe',
                400: '#9cabff',
                500: '#798bff',
                600: '#6576ff',
                700: '#5664d9',
                800: '#465fff',
                900: '#2c3782',
                950: '#29347a',
            },
            green:{
                50: '#e9fcf7',
                100: '#e6fcf6',
                200: '#bcf6e6',
                300: '#a5f3de',
                400: '#78eccd',
                500: '#4be6bd',
                600: '#1ee0ac',
                700: '#18b38a',
                800: '#128667',
                900: '#0c5a45',
                950: '#062d22',
            },
            yellow:{
                50: '#fef8e7',
                100: '#fef8e4',
                200: '#fcebb7',
                300: '#fbe59f',
                400: '#f8d76e',
                500: '#f6ca3e',
                600: '#f4bd0e',
                700: '#c3970b',
                800: '#927108',
                900: '#624c06',
                950: '#312603',
            },
            red:{
                50: '#fdeeed',
                100: '#fceceb',
                200: '#f8cbc8',
                300: '#f6bab5',
                400: '#f19891',
                500: '#ed756c',
                600: '#e85347',
                700: '#ba4239',
                800: '#8b322b',
                900: '#2e110e',
                950: '#2e110e',
            },
            cyan:{
                50: '#e6f9fc',
                100: '#e4f8fb',
                200: '#b5edf5',
                300: '#9de7f2',
                400: '#6bdaeb',
                500: '#3acee5',
                600: '#09c2de',
                700: '#079bb2',
                800: '#057485',
                900: '#044e59',
                950: '#02272c',
            },
            slate:{
                50: '#f5f7fd',
                100: '#ecf2ff',
                200: '#dfe9fe',
                300: '#b6c6e3',
                400: '#8094ae',
                500: '#6e82a5',
                600: '#526484',
                700: '#364a63',
                800: '#203145',
                900: '#1c2b46',
                950: '#131f34',
            },
            gray: {
                50: '#f7fafc',
                100: '#ebeef2',
                200: '#e5e9f2',
                300: '#dbdfea',
                400: '#b7c2d0',
                500: '#8091a7',
                600: '#3c4d62',
                700: '#344357',
                800: '#2b3748',
                900: '#1f2b3a',
                950: '#101924',
                1000: '#0d141d',
            },
        },
        spacing: {
            '0.75': '0.1875rem',
            '4.5': '1.125rem',
            '5.5': '1.375rem',
            '6.5': '1.625rem',
            '7.5': '1.875rem',
            '13': '3.25rem',
            '15': '3.75rem',
            '17': '4.25rem',
            '18': '4.5rem',
            '19': '4.75rem',
        },
        borderWidth: {
            '3': '3px',
            '5': '5px',
            '6': '6px',
            '7': '7px',
        }
    },
},
plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
],
}

checkout tailwind docs for configration optins

Sources and Credits:

Third party libraries and plugins.

HTML Version

React Version

Laravel Version

Others

Introduction

HTML Version

React Version

Quick Start

Installing Node.js

File and Folder Structure

HTML structure

CSS

File Structure

Tailwind Config

Javascript

File structure

Dark Mode

Change in tailwind.config.js

Quick Start

React js Project with vite

File and Folder Structure

CSS

File Structure

Tailwind Config

Quick Start

Laravel Project with vite

File and Folder Structure

CSS

File Structure

Tailwind Config

Sources and Credits:

Chart JS

react-chartjs-2

noUiSlider

DataTables

SimpleBar

Choices.js

Clipboard

react-copy-to-clipboard

DropZone

Vanilla JS Datepicker

react-datepicker

PristineJS

jsvectormap

popperjs

tagify

fslightbox

swiperjs

headlessui

tanstack table

react-accordion