UI Design

Modify CSS using Tailwind CSS and DaisyUI

Tailwind CSS is a utility-first framework that simplifies styling by applying predefined classes directly to HTML elements, enabling quick and responsive design. DaisyUI builds on Tailwind, offering a library of pre-designed UI components like buttons and forms, further speeding up development by providing ready-to-use elements for user interfaces. Together, they help streamline front-end design and implementation.

Install Tailwind CSS & DaisyUI

# Terminal

npm install -g tailwindcss @tailwindcss/cli
npm install -g @tailwindcss/forms
npm install -g daisyui

Tailwind configuration

All Tailwind CSS settings are centralized in the tailwind.config.js file, allowing you to customize:

• Color palettes and themes
• Custom animations and transitions
• Plugin configurations (forms, aspect-ratio, scrollbar-hide, DaisyUI)
• Responsive breakpoints
• Utility classes and components

This configuration file serves as your central hub for managing the framework's behavior and appearance across your entire application.

Configure your custom color palette

The tailwind.config.js file lets you define custom colors that reflect your brand identity. These colors can be used throughout your application using Tailwind's utility classes:

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
...
    theme: {
        extend: {
            colors: {
                'header-color': '#fefefd',
                'main-color-dark': '#282564',
                'main-color-light': '#a3ccf1',
                'second-color-dark': '#df8253',
                'second-color-light': '#f2b187',
                'third-color-dark': '#4d6eff',
                'third-color-light': '#dfe7f7',
                'fourth-color-dark': '#e25162',
                'fourth-color-light': '#efaca6',
                'fifth-color-dark': '#3c82ae',
            },
        },
    },
 ...
}

Logo & Favicon

The boilerplate comes with placeholder images for logo and favicon that you'll need to replace with your own brand assets. These files are located in the static folder:

static/
├── images/
│   ├── favicon/
│   │   ├── favicon.ico
│   │   ├── favicon-16x16.png
│   │   ├── favicon-32x32.png
│   │   └── apple-touch-icon.png
│   ├── logo.png

To customize your branding:

• Replace logo.png with your company logo
• Replace favicon.ico with your site icon (must be .ico format)
• Make sure to keep the same filenames to maintain compatibility with existing templates
• Clear your browser cache after replacing the files to see the changes