Theme Configuration

The theme section of your tailwind.config.js file is where you define your project’s color palette, type scale, fonts, breakpoints, border radius values, and more.

import preset from 'domaiex-plugins/tailwind.config';
const variablesConfig = require('./variables-confing');
const colorsConfig = require('./config-colors');
const colors = require('tailwindcss/colors');
const _ = require('lodash');
const domaiex = require('domaiex-plugins');

const defaultConfig = {
    presets: [
        preset,
    ],
    // Customizations specific to this project would go here
    content: [
        "./src/**/*.{html,js}",
        "./src/assets/libs/*"
    ],
    theme: {
        extend: {
            fontFamily: {
                'roboto-slab': ['"Roboto Slab", sans-serif'],
            },
            spacing: {
                sidebar: 'var(--spacing-sidebar)',
                'sidebar-medium': 'var(--spacing-sidebar-medium)',
                'sidebar-small': 'var(--spacing-sidebar-small)',
                'sidebar-boxed': 'var(--spacing-sidebar-boxed)',
                topbar: 'var(--spacing-topbar)',
                'sidebar-icon': '4.375rem',
            },
            colors: {
                'sidebar': 'var(--colors-sidebar)',
                'sidebar-border': 'var(--colors-sidebar-border)',
                'menu-title': 'var(--colors-menu-title)',
                'sidebar-text': 'var(--colors-sidebar-text)',
                'sidebar-bg': 'var(--colors-sidebar-bg)',
                'sidebar-text-hover': 'var(--colors-sidebar-text-hover)',
                'sidebar-bg-hover': 'var(--colors-sidebar-bg-hover)',
                'sidebar-text-active': 'var(--colors-sidebar-text-active)',
                'sidebar-bg-active': 'var(--colors-sidebar-bg-active)',
                'effect': 'var(--colors-effect)',
                topbar: 'var(--colors-topbar)',
                body: colors.white,
                ...colorsConfig
            },
            backgroundImage: {
                'auth': "url('../images/others/auth.jpg')",
            },
            boxShadow: {
                'flatpickr': '-5px 0 0 var(--tw-shadow-color), 5px 0 0 var(--tw-shadow-color)',
            },
            order: {
                '13': '13'
            }
        },
        ...variablesConfig
    },
    plugins: [
        ...pixeleyezui,
        //layouts
        require('./plugins/layouts/sidebar'),
        require('./plugins/layouts/topbar'),
        require('./plugins/layouts/others'),
        require('./plugins/layouts/footer'),
        require('./plugins/layouts/horizontal'),
        require('./plugins/layouts/boxed'),
        require('./plugins/layouts/semibox'),
        require('./plugins/layouts/page-heading'),
        require('./plugins/layouts/galaxy'),
        // theme-colors
        require('./plugins/theme-colors/root'),

        // plugins
        require('./plugins/custom-calendar'),
        require('./plugins/invoice-landing'),
        require('./plugins/navbar'),
    ]
}

const configMerged = _.merge({}, preset, defaultConfig);

module.exports = configMerged;

This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project.

Receive the latest updates directly in your inbox!

Be the first to know about new updates and exclusive discounts. No spam, just great offers!

How about

A Custom Project?

With over 7 years of experienced team, we specialize in delivering custom projects for startups, blue-chip companies, and government agencies. We have successfully completed over 250+ projects, providing tailored solutions that meet the unique needs of each client.

Hire Us
Domiex Admin & Dashboards
230+

Total Pages

5+

Layouts

11+

Application

We provide quick support withing one business day to all of our customers.

© Domiex Created & Crafted by SRBThemes.