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.