Kanakku Tailwind CSS Documentation

<!DOCTYPE html>
<html lang="en">
<head>
    @@include('partials/title-meta.html', {"title": "Dashboard"})
    @@include('partials/header.html', {"page": "index"})
</head>
<body>
    <div class="main-wrapper">

        @@include('partials/sidebar.html', {"page": "index"})

        <div class="page-wrapper">
            @@include('partials/topbar.html')

            <main class="page-content" id="main_content">
                <!-- Page content goes here -->
            </main>

            @@include('partials/footer.html')
        </div>
    </div>

    @@include('partials/script.html', {"page": "index"})
</body>
</html>

1. Theme Script (head)

theme-script.js is included in partials/header.html. It applies the saved light/dark theme before the page is painted to avoid a flash.

<script src="assets/js/theme-script.js"></script>

2. Core Scripts

Preline powers interactive components (dropdowns, collapses, overlays/modals), and script.js handles the sidebar, theme toggle and shared UI behavior.

<script type="module" src="assets/libs/preline/preline.js"></script>

3. Page-Specific Scripts

Add libraries and page logic inside a conditional block, keyed by the page value passed to the partial:

@@if (page === 'index') {
<!-- Apexcharts JS -->
<script src="assets/libs/apexcharts/apexcharts.min.js"></script>
<script src="assets/js/dashboard.js"></script>
}

You can update the logo in two ways:

Option 1: Replace the Image Files (Recommended)

Overwrite the logo files in src/assets/img/ using the same file names:

• logo.svg: Full logo (light mode).
• logo-white.svg: Full logo (dark mode / dark backgrounds).
• logo-small.svg: Small icon logo (light mode).
• logo-small-white.svg: Small icon logo (dark mode, sidebar rail).

Option 2: Edit the Partials

To use different file names, change the src of the logo images in src/partials/sidebar.html and src/partials/topbar.html:

<img src="assets/img/logo-small.svg" alt="" class="size-8 object-contain dark:hidden">
<img src="assets/img/logo-small-white.svg" alt="" class="size-8 object-contain hidden dark:block">

The default font is Plus Jakarta Sans, loaded from Google Fonts at the top of src/assets/css/style.css and applied through the --font-family-primary variable in the @theme block:

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

@theme {
    --font-family-primary: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

Using a Different Font

Replace the @import URL with the font you want (e.g. Inter) and update the variable:

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@theme {
    --font-family-primary: "Inter", system-ui, sans-serif;
}

Theme colors are design tokens defined in the @theme block of src/assets/css/style.css. Each color also has a numbered shade scale (-100 to -900) and a -hover value:

@theme {
    /* Brand */
    --color-primary: #7C3AED;
    --color-secondary: #F5B301;
    --color-dark: #0F172A;
    --color-white: #FFFFFF;
    --color-light: #F4F6FB;

    /* System */
    --color-success: #059669;
    --color-warning: #D97706;
    --color-danger: #DC2626;
    --color-info: #0284C7;

    /* Shades (primary example; same pattern for the other colors) */
    --color-primary-100: #EFE7FD;
    --color-primary-500: #BB99F6;
    --color-primary-900: #864AEE;
    --color-primary-hover: #632EBE;
}

Using the Colors

Every token becomes a Tailwind utility automatically, so changing a value updates the whole template:

<button class="bg-primary text-white hover:bg-primary-hover">Primary</button>
<span class="text-success bg-success-100">Success</span>