Getting Started
Introduction Requirements Installing Dependencies Customizing Colors JIT Mode Build Tools
Customizing Javascript
Javascript Structure Global Third-Party Libraries Configure Google Map API Key
Customizing CSS
CSS Structure Animations
Layouts & Themes
Side Menu Layout Simple Menu Layout Top Menu Layout Dark Mode View Composer
Built In Components
Accordion Alert Dropdown Modal & Slideover SVG Loading Icon Tab
Production Build
Configure Purge CSS Running Production Build
Attributions
Third-Party Libraries Getting Support

Introduction

Introducing Tailwise TailwindCSS 3 & Laravel Admin Dashboard Template

Tailwise is a responsive and fully featured Admin Template powered by the utility-first CSS framework TailwindCSS 3+. If you’re a developer looking for an admin dashboard with ready-made Tailwind components, developer-friendly, and highly customizable Tailwise is one of the best on the market. Even if you are not familiar with the framework, template’s UI components can be easily customized without leaving the HTML code.

Tailwise is a unique, modern, and flexible Admin dashboard template that can be used to build Backend Applications, Information system, CRM, or even to start a new simple project and learning to use TailwindCSS. We encourage you to have a good look at live preview and discover all the themes and included features!

Thanks for purchasing Tailwise, Left4code Team.

Features

Build your dashboard application quickly with Tailwise

Responsive Design
Built-in Compiler
Functional Dashboard
Apps Preview
Users Preview
Easy to Customize
Useful Pages
Fast Performance
Utility Based
Clean Code & Structure
PostCSS Support
Free Lifetime Updates

Browser Support

Extensive browser support

Browser
Chrome
Browser
Edge
Browser
Mozilla
Browser
Opera
Browser
Safari

Requirements

Minimum requirements to start using the template

Please install the following requirements:

PHP (Laravel's minimum supported PHP version is now 8.0.2).

https://www.php.net/downloads

Nodejs (TailwindCSS requires nodejs version 12.13.0 or higher).

https://nodejs.org/en/

Yarn (Package manager)

https://classic.yarnpkg.com/en/docs/install

PNPM Optional* (If you don't want to use Yarn)

https://pnpm.io/installation

Frontend Dependencies

A few steps to install the frontend dependencies

Dependencies are packages or third-party libraries used in the templates, including compiler to compile JS and CSS assets. If you already have met the minimum requirements, follow the steps below to install the project dependencies and run the compiler:

  • Access your console, then navigate to the project's root directory.
  • Run yarn install to start installing dependencies.
  • After the installation is complete, run yarn run dev to run the compiler.

As long as the compiler is running any code modifications will be monitored and you don't need to run the compiler again.

Backend Dependencies

A few steps to install the backend dependencies

Next, install the php dependencies with composer.

  • Install composer : Please install latest version of composer from https://getcomposer.org/.
  • Access console : Open composer console.
  • In console, navigate to the location where main folder is extracted.
  • Navigate to the the project's root directory.
  • Run composer install to install dependencies.
  • Duplicate .env.example file and rename it to .env adjust database connection depends on your local database setup.
  • Run php artisan migrate --seed to setup the database structure & seeder.
  • The starter kit comes with pre made authentication feature, so you can start to login with this default credentials email: [email protected] / password: password.

Customizing Colors

Change the template's primary colors

The main color configuration relies on CSS variables, the configuration can also be used in JS libraries like chart or icons. To change the color, simply change the color channels inside /resources/assets/css/_colors.css, without including the actual color function.

If you want to use the default color of Tailwind you can directly use the directive theme() function from Tailwind. Please check this link for more detailed options and features.

                            
/* Default colors */
:root {
    --color-primary: theme("colors.rgb.blue.800");
    --color-secondary: theme("colors.rgb.slate.200");
    --color-success: theme("colors.rgb.lime.500");
    --color-info: theme("colors.rgb.cyan.500");
    --color-warning: theme("colors.rgb.yellow.400");
    --color-pending: theme("colors.rgb.orange.500");
    --color-danger: theme("colors.rgb.red.600");
    --color-light: theme("colors.rgb.slate.100");
    --color-dark: theme("colors.rgb.slate.800");
    --color-slate-50: theme("colors.rgb.slate.50");
    --color-slate-100: theme("colors.rgb.slate.100");
    --color-slate-200: theme("colors.rgb.slate.200");
    --color-slate-300: theme("colors.rgb.slate.300");
    --color-slate-400: theme("colors.rgb.slate.400");
    --color-slate-500: theme("colors.rgb.slate.500");
    --color-slate-600: theme("colors.rgb.slate.600");
    --color-slate-700: theme("colors.rgb.slate.700");
    --color-slate-800: theme("colors.rgb.slate.800");
    --color-slate-900: theme("colors.rgb.slate.900");
}

/* Default dark-mode colors */
.dark {
    --color-primary: theme("colors.rgb.blue.700");
    --color-slate-500: theme("colors.rgb.slate.400");
    --color-darkmode-50: 87 103 132;
    --color-darkmode-100: 74 90 121;
    --color-darkmode-200: 65 81 114;
    --color-darkmode-300: 53 69 103;
    --color-darkmode-400: 48 61 93;
    --color-darkmode-500: 41 53 82;
    --color-darkmode-600: 40 51 78;
    --color-darkmode-700: 35 45 69;
    --color-darkmode-800: 27 37 59;
    --color-darkmode-900: 15 23 42;
}

/* Theme 1 colors */
.theme-1 {
    --color-primary: theme("colors.rgb.emerald.900");
    --color-secondary: theme("colors.rgb.slate.200");
    --color-success: theme("colors.rgb.emerald.600");
    --color-info: theme("colors.rgb.cyan.500");
    --color-warning: theme("colors.rgb.yellow.400");
    --color-pending: theme("colors.rgb.amber.500");
    --color-danger: theme("colors.rgb.rose.600");
    --color-light: theme("colors.rgb.slate.100");
    --color-dark: theme("colors.rgb.slate.800");
    &.dark {
        --color-primary: theme("colors.rgb.emerald.800");
    }
}

/* Theme 2 colors */
.theme-2 {
    --color-primary: theme("colors.rgb.blue.900");
    --color-secondary: theme("colors.rgb.slate.200");
    --color-success: theme("colors.rgb.teal.600");
    --color-info: theme("colors.rgb.cyan.500");
    --color-warning: theme("colors.rgb.amber.500");
    --color-pending: theme("colors.rgb.orange.500");
    --color-danger: theme("colors.rgb.red.700");
    --color-light: theme("colors.rgb.slate.100");
    --color-dark: theme("colors.rgb.slate.800");
    &.dark {
        --color-primary: theme("colors.rgb.blue.800");
    }
}

/* Theme 3 colors */
.theme-3 {
    --color-primary: theme("colors.rgb.cyan.900");
    --color-secondary: theme("colors.rgb.slate.200");
    --color-success: theme("colors.rgb.teal.600");
    --color-info: theme("colors.rgb.cyan.500");
    --color-warning: theme("colors.rgb.amber.500");
    --color-pending: theme("colors.rgb.amber.600");
    --color-danger: theme("colors.rgb.red.700");
    --color-light: theme("colors.rgb.slate.100");
    --color-dark: theme("colors.rgb.slate.800");
    &.dark {
        --color-primary: theme("colors.rgb.cyan.800");
    }
}

/* Theme 4 colors */
.theme-4 {
    --color-primary: theme("colors.rgb.indigo.900");
    --color-secondary: theme("colors.rgb.slate.200");
    --color-success: theme("colors.rgb.emerald.600");
    --color-info: theme("colors.rgb.cyan.500");
    --color-warning: theme("colors.rgb.yellow.500");
    --color-pending: theme("colors.rgb.orange.600");
    --color-danger: theme("colors.rgb.red.700");
    --color-light: theme("colors.rgb.slate.100");
    --color-dark: theme("colors.rgb.slate.800");
    &.dark {
        --color-primary: theme("colors.rgb.indigo.700");
    }
}                              
                            
                        

JIT Mode

Enable/Disable JIT mode compiler

Since version 2.1+ TailwindCSS has a new compiler called JIT (Just In Time), which has many advantages over the previous compiler, such as speeding up the compilation process and rendering in the browser. To enable/disable this mode, you can open the tailwind.config.js file, comment/uncomment this line mode: jit or add it if it is not already there, don't forget to rerun the compiler to reload the configuration.

                            
const colors = require("tailwindcss/colors");
const {
    toRGB,
    withOpacityValue,
} = require("@left4code/tw-starter/dist/js/tailwind-config-helper");

module.exports = {
    mode: "jit",
    content: [
        "./src/**/*.{php,html,js,jsx,ts,tsx,vue}",
        "./resources/**/*.{php,html,js,jsx,ts,tsx,vue}",
        "./node_modules/@left4code/tw-starter/**/*.js",
    ],
                            
                        

Build Tools

Learn how to configure Vite

Vite is a modern frontend build tool that provides an extremely fast development environment and bundles your code for production. You can configure Vite on the vite.config.js file.

                            
...
laravel({
  input: [
      "resources/css/app.css",
      "resources/js/app.js",
      "resources/js/ckeditor-classic.js",
      "resources/js/ckeditor-inline.js",
      "resources/js/ckeditor-balloon.js",
      "resources/js/ckeditor-balloon-block.js",
      "resources/js/ckeditor-document.js",
  ],
  refresh: true,
}),
...
                            
                        

You can see all available APIs in the Vite documentation.

Javascript Structure

Learn javascript code structure on Tailwise

By default, every javascript file is imported in this file /resources/js/app.js. You can add or remove new third-party libraries from there.

                            
/*
|--------------------------------------------------------------------------
| Tailwise Built-in Components
|--------------------------------------------------------------------------
|
| Import Tailwise built-in components.
|
*/
import "./bootstrap";
import "@left4code/tw-starter/dist/js/svg-loader";
import "@left4code/tw-starter/dist/js/accordion";
import "@left4code/tw-starter/dist/js/alert";
import "@left4code/tw-starter/dist/js/dropdown";
import "@left4code/tw-starter/dist/js/modal";
import "@left4code/tw-starter/dist/js/tab";

/*
|--------------------------------------------------------------------------
| 3rd Party Libraries
|--------------------------------------------------------------------------
|
| Import 3rd party library JS files.
|
*/
import "./chart";
import "./highlight";
import "./feather";
import "./tiny-slider";
import "./tippy";
import "./datepicker";
import "./tom-select";
import "./dropzone";
import "./validation";
import "./zoom";
import "./notification";
import "./tabulator";
import "./calendar";

/*
|--------------------------------------------------------------------------
| Custom Components
|--------------------------------------------------------------------------
|
| Import JS custom components.
|
*/
import "./maps";
import "./chat";
import "./show-modal";
import "./show-slide-over";
import "./show-dropdown";
import "./search";
import "./copy-code";
import "./show-code";
import "./side-menu";
import "./mobile-menu";
import "./side-menu-tooltip";
import "./dark-mode-switcher";                             
                            
                        

You can also create new endpoint assets if needed by modifying vite.config.js. Please check the following example for more details.

                            
...
laravel({
  input: [
      "resources/js/create-product.js", // Include third-party libraries for create-product page
      "resources/js/update-product.js", // Include third-party libraries for update-product page
      "resources/js/landing-page.js", // Include third-party libraries for landing-page page
      "resources/js/app.js", // Include third-party libraries for all pages
      "resources/css/app.css",
  ],
  refresh: true,
}),
...
                            
                        

This way, you can split assets as much as needed into smaller ones so that each user only downloads the required files when accessing the page.

Global Third-Party Libraries

Learn how to use the library outside of the app.js configuration

In some cases, we need a way to access the plugin outside the app.js configuration. You can do this by attaching the required plugin to the window object. For a more detailed example, please open this file /resources/js/bootstrap.js and check the following code.

                            
// Load plugins
import helper from "./helper";
import * as Popper from "@popperjs/core";
import dom from "@left4code/tw-starter/dist/js/dom";

// Example with Toastify plugin
import Toastify from "toastify-js";

// Set plugins globally
window.helper = helper;
window.Popper = Popper;
window.$ = dom;

// Attach to the window object
window.Toastify = Toastify;
                            
                        

Then you can access the plugin instance outside of app.js.

                            
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tailwise - Tailwind Laravel Admin Template</title>
</head>
    ...
    <body>
        <!-- BEGIN: JS Assets-->
        <script src="/dist/js/app.js"></script>
        <!-- END: JS Assets-->
        <script>
            // Write your code here
            Toastify({
                node: cash("#basic-non-sticky-notification-content")
                    .clone()
                    .removeClass("hidden")[0],
                duration: 3000,
                newWindow: true,
                close: true,
                gravity: "top",
                position: "right",
                stopOnFocus: true,
            }).showToast();
        </script>
    </body>
</html>
                            
                        

Please note to put your javascript code after app.js script tag.

Configure Google Map API Key

Working with google map

You can see the API Key configuration at the end of the file, please replace the placeholder string ["your-google-map-api"] with the API key you have.

                            
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tailwise - Tailwind Laravel Admin Template</title>
</head>
    ...
    <body>
        <!-- BEGIN: JS Assets-->
        <script src="https://maps.googleapis.com/maps/api/js?key=["your-google-map-api"]&libraries=places"></script>
        <!-- END: JS Assets-->
    </body>
</html>
                            
                        

CSS Structure

Learn CSS code structure on Tailwise

Tailwise uses some PostCSS plugin like postcss-import, tailwindcss/nesting, and postcss-advanced-variables to use variables, nested CSS code, and modular CSS code. This plugin offers similar features to SASS but with only PostCSS plugins. If you want to know more about using Tailwind with PostCSS as a default preprocessor please check this link.

You can open /resources/css/app.css to add new 3rd party library or add new component.

                            
/*
|--------------------------------------------------------------------------
| TailwindCSS Directives
|--------------------------------------------------------------------------
|
| Import TailwindCSS directives and swipe out at build-time with all of
| the styles it generates based on your configured design system.
|
| Please check this link for more details:
| https://tailwindcss.com/docs/installation#include-tailwind-in-your-css
|
*/
@import "./_tailwind.css";

/*
|--------------------------------------------------------------------------
| Colors
|--------------------------------------------------------------------------
|
| Import all fonts used in the template, the font configuration can be
| seen in "tailwind.config.js".
|
| Please check this link for more details:
| https://tailwindcss.com/docs/theme
|
*/
@import "./_colors.css";

/*
|--------------------------------------------------------------------------
| Fonts
|--------------------------------------------------------------------------
|
| Import all fonts used in the template, the font configuration can be
| seen in "tailwind.config.js".
|
| Please check this link for more details:
| https://tailwindcss.com/docs/theme
|
*/
@import "./fonts/_roboto.css";

/*
|--------------------------------------------------------------------------
| Mixins
|--------------------------------------------------------------------------
|
| Import helper mixins.
|
*/
@import "@left4code/tw-starter/dist/css/mixins/_media.css";

/*
|--------------------------------------------------------------------------
| 3rd Party Libraries
|--------------------------------------------------------------------------
|
| Import 3rd party library CSS files.
|
*/
@import "@left4code/tw-starter/dist/css/_breadcrumb.css";
@import "@left4code/tw-starter/dist/css/_accordion.css";
@import "@left4code/tw-starter/dist/css/_alert.css";
@import "@left4code/tw-starter/dist/css/_btn.css";
@import "@left4code/tw-starter/dist/css/_dropdown.css";
@import "@left4code/tw-starter/dist/css/_file.css";
@import "@left4code/tw-starter/dist/css/_form-reset.css";
@import "@left4code/tw-starter/dist/css/_form-check.css";
@import "@left4code/tw-starter/dist/css/_form-control.css";
@import "@left4code/tw-starter/dist/css/_form-help.css";
@import "@left4code/tw-starter/dist/css/_form-inline.css";
@import "@left4code/tw-starter/dist/css/_form-label.css";
@import "@left4code/tw-starter/dist/css/_form-select.css";
@import "@left4code/tw-starter/dist/css/_image-fit.css";
@import "@left4code/tw-starter/dist/css/_input-group.css";
@import "@left4code/tw-starter/dist/css/_intro.css";
@import "@left4code/tw-starter/dist/css/_modal.css";
@import "@left4code/tw-starter/dist/css/_pagination.css";
@import "@left4code/tw-starter/dist/css/_progress.css";
@import "@left4code/tw-starter/dist/css/_scrollbar.css";
@import "@left4code/tw-starter/dist/css/_tab.css";
@import "@left4code/tw-starter/dist/css/_table.css";
@import "@left4code/tw-starter/dist/css/_typing-dots.css";
@import "@left4code/tw-starter/dist/css/_zoom-in.css";
@import "@left4code/tw-starter/dist/css/_box.css";
@import "highlight.js/styles/github.css";
@import "tippy.js/dist/tippy.css";
@import "tippy.js/themes/light.css";
@import "tippy.js/dist/svg-arrow.css";
@import "tippy.js/animations/shift-away.css";
@import "toastify-js/src/toastify.css";
@import "dropzone/dist/dropzone.css";
@import "zoom-vanilla.js/dist/zoom.css";
@import "tabulator-tables/dist/css/tabulator.css";
@import "tom-select/dist/css/tom-select.css";
@import "tiny-slider/dist/tiny-slider.css";

/*
|--------------------------------------------------------------------------
| Components
|--------------------------------------------------------------------------
|
| Import CSS components.
|
*/
@import "./components/_global.css";
@import "./components/_top-bar.css";
@import "./components/_login.css";
@import "./components/_table-report.css";
@import "./components/_report-chart.css";
@import "./components/_search.css";
@import "./components/_notification.css";
@import "./components/_report-box.css";
@import "./components/_report-box-2.css";
@import "./components/_report-box-3.css";
@import "./components/_report-box-4.css";
@import "./components/_content.css";
@import "./components/_top-nav.css";
@import "./components/_side-nav.css";
@import "./components/_breadcrumb.css";
@import "./components/_toastify.css";
@import "./components/_toastify-content.css";
@import "./components/_feather-icon.css";
@import "./components/_top-bar-boxed.css";
@import "./components/_mobile-menu.css";
@import "./components/_inbox-filter.css";
@import "./components/_inbox.css";
@import "./components/_chat.css";
@import "./components/_chat-dropdown.css";
@import "./components/_news.css";
@import "./components/_pricing-tabs.css";
@import "./components/_error-page.css";
@import "./components/_search-result.css";
@import "./components/_notification-content.css";
@import "./components/_report-maps.css";
@import "./components/_pos-dropdown.css";
@import "./components/_post.css";
@import "./components/_litepicker.css";
@import "./components/_tiny-slider.css";
@import "./components/_tippy.css";
@import "./components/_tabulator.css";
@import "./components/_tom-select.css";
@import "./components/_dropzone.css";
@import "./components/_ckeditor.css";
@import "./components/_zoom-vanilla.css";
@import "./components/_dark-mode-switcher.css";
@import "./components/_hljs.css";
@import "./components/_source-preview.css";
@import "./components/_full-calendar.css";
@import "./components/_pristine.css";                             
                            
                        

Animations

Animate elements with CSS animations

TailwindCSS has built-in animation utilities that you can use to make your application more interactive. There are also some custom animations we have added for some components. You can check the table below for more details.

Class Description
intro-y Sequentially move elements from bottom to top with fade-in animation.
-intro-y Sequentially move elements from top to bottom with fade-in animation.
intro-x Sequentially move elements from right to left with fade-in animation.
-intro-x Sequentially move elements from left to right with fade-in animation.
zoom-in Zoom element on hover.

However, you can also disable the custom animation if you feel it's not necessary. You can open this file /src/css/app.css and remove the line below.

                            
/*
|--------------------------------------------------------------------------
| 3rd Party Libraries
|--------------------------------------------------------------------------
|
| Import 3rd party library CSS files.
|
*/
...
@import "~@left4code/tw-starter/dist/css/intro.css";
...
@import "~@left4code/tw-starter/dist/css/zoom-in.css";
                            
                        

Side Menu Layout

Working with side menu layout

                            
<!DOCTYPE html>
<html lang="en" class="light">
    <!-- BEGIN: Head -->
    <head>
        <title>Dashboard - Rubick - Tailwind Laravel Admin Template</title>
    </head>
    <!-- END: Head -->
    <body class="main">
        <!-- BEGIN: Mobile Menu -->
        <div class="mobile-menu md:hidden">
            ...
        </div>
        <!-- END: Mobile Menu -->
        <div class="flex">
            <!-- BEGIN: Side Menu -->
            <nav class="side-nav">
                ...
            </nav>
            <!-- END: Side Menu -->
            <!-- BEGIN: Content -->
            <div class="content">
                ...
            </div>
            <!-- END: Content -->
        </div>
    </body>
</html>
                            
                        

Simple Menu Layout

Working with simple menu layout

                            
<!DOCTYPE html>
<html lang="en" class="light">
    <!-- BEGIN: Head -->
    <head>
        <title>Dashboard - Rubick - Tailwind Laravel Admin Template</title>
    </head>
    <!-- END: Head -->
    <body class="main">
        <!-- BEGIN: Mobile Menu -->
        <div class="mobile-menu md:hidden">
            ...
        </div>
        <!-- END: Mobile Menu -->
        <div class="flex">
            <!-- BEGIN: Simple Menu -->
            <nav class="side-nav side-nav--simple">
                ...
            </nav>
            <!-- END: Simple Menu -->
            <!-- BEGIN: Content -->
            <div class="content">
                ...
            </div>
            <!-- END: Content -->
        </div>
    </body>
</html>
                            
                        

Top Menu Layout

Working with top menu layout

                            
<!DOCTYPE html>
<html lang="en" class="light">
    <!-- BEGIN: Head -->
    <head>
        <title>Dashboard - Rubick - Tailwind Laravel Admin Template</title>
    </head>
    <!-- END: Head -->
    <body class="main">
        <!-- BEGIN: Mobile Menu -->
        <div class="mobile-menu md:hidden">
            ...
        </div>
        <!-- END: Mobile Menu -->
        <!-- BEGIN: Top Bar -->
        <div class="border-b border-theme-29 -mt-10 md:-mt-5 -mx-3 sm:-mx-8 px-3 sm:px-8 pt-3 md:pt-0 mb-10">
            ...
        </div>
        <!-- END: Top Bar -->
        <!-- BEGIN: Top Menu -->
        <nav class="top-nav">
            ...
        </nav>
        <!-- END: Top Menu -->
        <!-- BEGIN: Content -->
        <div class="content">
            ...
        </div>
        <!-- END: Content -->
    </body>
</html>
                            
                        

Dark Mode

Using dark mode on Tailwise

Dark mode themes can be activated by adding a dark class to the root of the HTML element. Please check the following code for more details.

                            
<!DOCTYPE html>
<html lang="en" class="dark">
<!-- BEGIN: Head -->
<head>
    <title>Dashboard - Rubick - Tailwind Laravel Admin Template</title>
</head>
...
                            
                        

To create a toggle function you can use a simple javascript code like below.

                            
$(".dark-mode-switcher").on("click", function () {
    if ($("html").hasClass("dark")) {
        $("html").removeClass("dark").addClass("light");
    } else {
        $("html").removeClass("light").addClass("dark");
    }
});
                            
                        

View Composer

Using different layouts & built-in view composer.

You may be familiar with Laravel's view composer feature. Tailwise includes several views composer that you can use to change the layout, showing menus, and dark mode features. You can easily show page with a specific layout via controller.

                            
<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

class PageController extends Controller
{
    /**
      * Show specified view.
      *
      * @param  \Illuminate\Http\Request  $request
      * @return \Illuminate\Http\Response
      */
    public function dashboardOverview1()
    {
        return view('pages/dashboard-overview-1', [
            // Use the top-menu layout
            'layout' => 'top-menu'

            // Pass data to view
            'products' => Products::all()
        ]);
    }

    ...
                            
                        

You can check other included view composers at /App/Http/View/Composers.

Accordion

Working with built-in accordion components

These are very basic HTML structure of the accordion components, you can open the demo to check more of the other implementations.

                            
<div id="faq-accordion-1" class="accordion">
    <div class="accordion-item">
        <div id="faq-accordion-content-1" class="accordion-header">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq-accordion-collapse-1" aria-expanded="true" aria-controls="faq-accordion-collapse-1">
                OpenSSL Essentials: Working with SSL Certificates, Private Keys
            </button>
        </div>
        <div id="faq-accordion-collapse-1" class="accordion-collapse collapse show" aria-labelledby="faq-accordion-content-1" data-bs-parent="#faq-accordion-1">
            <div class="accordion-body text-gray-700 dark:text-gray-600 leading-relaxed">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div id="faq-accordion-content-2" class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-accordion-collapse-2" aria-expanded="false" aria-controls="faq-accordion-collapse-2">
                Understanding IP Addresses, Subnets, and CIDR Notation
            </button>
        </div>
        <div id="faq-accordion-collapse-2" class="accordion-collapse collapse" aria-labelledby="faq-accordion-content-2" data-bs-parent="#faq-accordion-1">
            <div class="accordion-body text-gray-700 dark:text-gray-600 leading-relaxed">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div id="faq-accordion-content-3" class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-accordion-collapse-3" aria-expanded="false" aria-controls="faq-accordion-collapse-3">
                How To Troubleshoot Common HTTP Error Codes
            </button>
        </div>
        <div id="faq-accordion-collapse-3" class="accordion-collapse collapse" aria-labelledby="faq-accordion-content-3" data-bs-parent="#faq-accordion-1">
            <div class="accordion-body text-gray-700 dark:text-gray-600 leading-relaxed">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <div id="faq-accordion-content-4" class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq-accordion-collapse-4" aria-expanded="false" aria-controls="faq-accordion-collapse-4">
                An Introduction to Securing your Linux VPS
            </button>
        </div>
        <div id="faq-accordion-collapse-4" class="accordion-collapse collapse" aria-labelledby="faq-accordion-content-4" data-bs-parent="#faq-accordion-1">
            <div class="accordion-body text-gray-700 dark:text-gray-600 leading-relaxed">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>
    </div>
</div>
                            
                        

You can configure the active accordion by adding a show class to the desired accordion.

Alert

Working with built-in alert components

These are very basic HTML structure of the alert components, you can open the demo to check more of the other implementations.

                            
<div class="alert alert-primary alert-dismissible show flex items-center mb-2" role="alert">
    <i data-feather="alert-circle" class="w-6 h-6 mr-2"></i> Awesome alert with icon
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        <i data-feather="x" class="w-4 h-4"></i>
    </button>
</div>
                            
                        

You can add a close button to the alert by using the btn-close class.

SVG Loading Icon

Working with built-in SVG loading icon components

These are the built-in SVG loading icons available on Tailwise. The icon component has a data-loading-icon parameter to specify the icon, and every icon element will be replaced with an SVG icon at runtime. You can also use the data-color parameter to specify the color of the icon.

                            
<!-- Audio -->
<i data-loading-icon="audio" class="w-8 h-8"></i>

<!-- Ball Triangle -->
<i data-loading-icon="ball-triangle" class="w-8 h-8"></i>

<!-- Bars -->
<i data-loading-icon="bars" class="w-8 h-8"></i>

<!-- Circles -->
<i data-loading-icon="circles" class="w-8 h-8"></i>

<!-- Grid -->
<i data-loading-icon="grid" class="w-8 h-8"></i>

<!-- Hearts -->
<i data-loading-icon="hearts" class="w-8 h-8"></i>

<!-- Oval -->
<i data-loading-icon="oval" class="w-8 h-8"></i>

<!-- Puff -->
<i data-loading-icon="puff" class="w-8 h-8"></i>

<!-- Rings -->
<i data-loading-icon="rings" class="w-8 h-8"></i>

<!-- Spinning Circles -->
<i data-loading-icon="spinning-circles" class="w-8 h-8"></i>

<!-- Tail Spin -->
<i data-loading-icon="tail-spin" class="w-8 h-8"></i>

<!-- Three Dots -->
<i data-loading-icon="three-dots" class="w-8 h-8"></i>
                            
                        

You can initialize icons at runtime with the javascript API, this will be useful when you make changes to the DOM element such as changing icons or using new icons.

                            
// Example re-init SVG loading icon
tailwind.svgLoader();
                            
                        

Tab

Working with built-in tab components

These are very basic HTML structure of the tab components, you can open the demo to check more of the other implementations.

                            
<div class="nav nav-tabs justify-center" role="tablist">
    <a id="tab-1-toggle" data-toggle="tab" data-target="#tab-1" href="javascript:;" class="flex-1 py-2 rounded-md text-center active" role="tab" aria-controls="tab-1" aria-selected="true">Tab 1</a>
    <a id="tab-2-toggle" data-toggle="tab" data-target="#tab-2" href="javascript:;" class="flex-1 py-2 rounded-md text-center" role="tab" aria-controls="tab-2" aria-selected="false">Tab 2</a>
</div>
<div class="tab-content">
    <div id="tab-1" class="tab-pane active" role="tabpanel" aria-labelledby="tab-1">
        ...
    </div>
    <div id="tab-2" class="tab-pane" role="tabpanel" aria-labelledby="tab-2">
        ...
    </div>
</div>
                            
                        

Configure PurgeCSS

Configuring PurgeCSS on TailwindCSS

Configuring PurgeCSS in TailwindCSS is very easy. We have provided an example in tailwind.config.js. You can reconfigure these settings if you have different project structures or add new file extensions.

                            
const colors = require("tailwindcss/colors");
const {
    toRGB,
    withOpacityValue,
} = require("@left4code/tw-starter/dist/js/tailwind-config-helper");

module.exports = {
    mode: "jit",
    content: [
        "./src/**/*.{php,html,js,jsx,ts,tsx,vue}",
        "./resources/**/*.{php,html,js,jsx,ts,tsx,vue}",
        "./node_modules/@left4code/tw-starter/**/*.js",
        ".//*.html",
    ],
    ...
                            
                        

Running Production Build

Running production build to produce optimized JS/CSS assets

To produce an optimized JS/CSS assets, you can run yarn run build to compile assets for a production build. It will automatically purge unused CSS classes and minify the assets.

Getting Support

Support and assistance information

Don’t hesitate to contact us with any questions or concerns you may have at [email protected]. Please include your purchase code for verification process, you can check this link to find your purchase code.