Tailboard | Tailwind Dashboard Template

Getting Started

This guide will help you get started with a this template, including how to run and customize.

Run your theme

So you’ve downloaded your theme .zip file, unpacked it, and you’re ready to start building! To view your theme, you’ll need to run your theme’s "build process" to compile source files and create a local server to preview pages.

Note: Tailboard template you are currently viewing is a Tailwind Static HTML Template. NOT a WordPress Theme!. Please DO NOT try to install files into WordPress this will not work.

Tools & Setup development

Tailboard is built using modern development toolset like Node Js, Gulp and Browsersync. Follow these steps and you should be ready to rock:

Download and install Node.js and open Terminal (Command Line)
Open root tailboard directory from terminal
Install a theme dependencies via npm install
After Npm install complete, run npm run dev command
Your local server address will run on ( localhost:3000 )
Now you can edit source files and preview changes instantly with live reload

Yup, that's it

Info: Node js version 12.xx or later and code editor using Visual studio code. Run npm install --global gulp-cli command if you haven't installed Gulp CLI before.

Package.json, Gulp and Browsersync

When install processing completed, you'll be able to run the various commands provided from the command line. Now you have an integrated workflow.

Our package.json and gulpfile.js includes the following tasks:

Core Task	Description
`npm run dev`	Start development process with generate `src/tailwindcss/*.css` to `src/css/style.css` and launch Browsersync in `http://localhost:3100/` with automate page reload
`npm run build`	Generates a `dist/` directory with all the production files `Minify css, js and other files`

If you are using MacOS please use sudo keyword in the command because they need administrator rights to install Gulp globally.

File structures

Download package

A guide to understanding how theme is structured and organized. Once downloaded, unzip the compressed folder and you'll see something like this:

Tailboard
- index.html
- ***.html (all html files)
- documentation.html
- package.json
- gulpfile.js
- config.js
- tailwind.config.js
- src
  - css
    - styles.css
  - js
    - theme.js
    - vendors.js
  - tailwindcss
    - tailwindcss.css
  - img
    - logo.png
    - **.jpg ( all source images )
- dist
  - css
    - bundle.min.css
  - js
    - bundle.min.js
- vendors
  - alpinejs
  - chart.js
  - -- other vendors

Customize CSS

How to customize css?

To avoid file loss, overrides of your custom styles or any other conflicts during the upgrade process, create or modify your styles with add your custom css ortailwindcss in src/tailwindcss/tailwindcss.css file. If you want to add other plugin css or remove some css, please edit this file.

                      
@tailwind base;
@tailwind components;
@tailwind utilities;

********************

plugins css in here

More information about custom in Tailwindcss is in here

How Edit RTL CSS?

Add or edit rtl css from html file like this ltr:text-start rtl:text-end

More information about rtl in here Tailwind RTL

Customize JS

How to customize JS?

To avoid file loss, overrides of your custom js or any other conflicts during the upgrade process, create or modify your custom javascript in src/js/theme.js file.

                      
                        // Custom JS
                        const myCustom = function () {
                          
                          // insert your javascript in here

                        }

How to customize Vendors JS?

We use third party plugins to add features to the theme. If you don't need the feature, you can remove it from the html file before </body>.


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

<!-- Minify Global javascript (for production purpose) -->
<!-- <script src="dist/js/scripts.js"></script> -->

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

<!--start::Vendor javascript (only on this page)-->
<script src="vendors/chart.js/dist/chart.umd.js"></script><!-- charts -->
<script src="src/js/chart.js"></script><!-- chart config -->

<script src="vendors/dropzone/dist/dropzone-min.js"></script><!-- uploader images -->
<script src="vendors/simplemde/dist/simplemde.min.js"></script><!-- text editor -->
<script src="vendors/jsvectormap/dist/jsvectormap.min.js"></script><!-- vector map -->
<script src="vendors/jsvectormap/dist/maps/world.js"></script><!-- world map -->
<script src="vendors/glightbox/dist/js/glightbox.min.js"></script><!-- lightbox -->
<script src="vendors/@splidejs/splide/dist/js/splide.min.js"></script><!-- carousel -->
<script src="vendors/@fullcalendar/index.global.min.js"></script><!-- calendar events -->
<script src="src/js/prism.js"></script><!-- highlight code -->
<!--end::Vendor javascript (only on this page)-->

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

Customize Color

How to customize Color and background?

We use a subset of Tailwindcss color palette for generating color schemes.
You can use text- or bg- before color like this text-primary-500 or bg-primary-600 and customize color from HTML file.

Our primary color is text-primary-. You can change all primary color on html file with change text-primary- and bg-primary- with others color.

More complete color can see in Official Tailwindcss

Dark Mode

Tailboard is ready in light and dark mode. Very simple to change color skin, just editing html file and add "dark" classes like this <html class="dark" lang="en">.

Read more information about Tailwind dark mode in here https://tailwindcss.com/docs/dark-mode

Theme Configuration

You can change setting about Tailwindcss from this file. For example: Change Google fonts from tailwind.config.js

                
                  // tailwind.config.js
module.exports = {
  mode: 'layers',
  darkMode: 'class', // or 'media' or false
  theme: {
    extend: {},
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
      serif: ['Playfair Display', 'serif'],
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

For more information about Theme configuration please read in here

Credits

First, let us take this opportunity to thank all the creative minds for their great products and plugins.

Vendors and Plugins

All third-party plugins (libraries) are located in the vendors/.. folder.

Name	Description	URL
Tailwind Css	Rapidly build modern websites without ever leaving your HTML	https://tailwindcss.com/
Alpine JS	Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost	https://github.com/alpinejs/alpine
Chart.js	Simple yet flexible JavaScript charting for designers & developers.	https://www.chartjs.org/
Alpine Sort	Alpine Sort plugin allows you to easily re-order elements by dragging them with your mouse.	https://alpinejs.dev/plugins/sort
Dropzone	Dropzone is an easy to use drag'n'drop library. It supports image previews and shows nice progress bars.	https://github.com/dropzone/dropzone
Flatpickr	lightweight, powerful javascript datetimepicker with no dependencies.	https://github.com/flatpickr/flatpickr
FullCalendar	Full-sized drag & drop event calendar.	https://github.com/fullcalendar/fullcalendar
Gauge.js	100% native and cool looking animated JavaScript/CoffeScript gauge.	https://github.com/bernii/gauge.js
Microtip	Minimal, accessible, ultra lightweight css tooltip library. Just 1kb.	https://github.com/ghosh/microtip
Smooth-scroll	A lightweight script to animate scrolling to anchor links.	https://github.com/cferdinandi/smooth-scroll
Glightbox	Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes	https://github.com/biati-digital/glightbox
Google Fonts	Google Fonts is a library of over 800 libre licensed fonts, an interactive web directory for browsing the library, and APIs for conveniently using the fonts via CSS and Android.	https://fonts.google.com
Jsvectormap	A lightweight Javascript library for creating interactive maps and pretty data visualization.	https://github.com/themustafaomar/jsvectormap
Prism.js	Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It's used in thousands of websites, including some of those you visit daily.	http://prismjs.com
Simple-DataTables	DataTables but in Vanilla ES2018 JS	https://github.com/fiduswriter/Simple-DataTables
SimpleMDE	SimpleMDE is a simple, embeddable, and beautiful JS markdown editor	https://simplemde.com/
Splide	Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.	https://splidejs.com/
Pristine	Vanilla javascript form validation micro-library.	https://pristine.js.org/
Tagify	lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue.	https://github.com/yairEO/tagify

Images & Assets

Source images are located in the src/img/.. folder

Name	Description	URL
Tailwinddashboard.com	3D ilustrations by Tailwinddashboard.com	https://tailwinddashboard.com
Pexels	The best free stock photos & videos shared by talented creators.	https://www.pexels.com/
Boxicons	Simple Open Source icons carefully crafted for designers & developers.	https://boxicons.com/
Bootstrap Icons	For the first time ever, Bootstrap has its own icon library.	https://icons.getbootstrap.com/

Changelogs

See what's new added, changed, fixed, improved or updated in the latest version.

Version 1.6.0 - June 14, 2024.

Fix Fix RTL mode classes

Update Update Tailwindcss v 3.4.3

Update Replace Dragula with Alpine Sort

Update Update Gulpfile Build System

Update Update All Vendors version

Update Add Customizer Color and Dark Mode

Update Add Css Color Variables

Update Recolor from cyan slate to purple stone

Update Update All source and css vendors

Update Update Chart.js config

Version 1.5.0 - March 08, 2023.

Update Tailwind Css version v3.2.x

Fix Fix small bugs in css

Version 1.2.0 - January 22, 2023.

Fix Fix responsive dashboard analytics, finance and support

Fix Fix mobile main padding bottom

Update Update Tailwind version 3.2.4

Version 1.1.0 - November 01, 2022.

Fix Fix all Tailwind utilities conflict

Version 1.0.0 - October 2022.

new Initial Release of Tailboard