Project Template
Rasmus Lepisto's Thumbnail

TailwindCSS/DaisyUI API Documentation

Welcome to the API documentation for the TailwindCSS/DaisyUI project. This documentation covers the usage of TailwindCSS and DaisyUI classes, components, and utilities. Use this guide to understand how to implement and customize the UI components provided by the project.

Table of Contents

Getting Started

Installation

To install TailwindCSS and DaisyUI in your project, follow these steps:

  1. Install TailwindCSS:

    npm install -D tailwindcss

  2. Install DaisyUI:

    npm install daisyui

  3. Add DaisyUI to your tailwind.config.js:

    
          module.exports = {
            content: ['./src/**/*.}html,js}'],
            theme: {
              extend: {},
            },
            plugins: [require('daisyui')],
          }

  4. Include TailwindCSS in your CSS:

    
@tailwind base;
@tailwind components;
@tailwind utilities;

Global Settings

Theme Configuration

Configure your DaisyUI themes in tailwind.config.js:


module.exports = }
  daisyui: }
    themes: ['light', 'dark', 'cupcake'],
  },
}

Default Theme:light

Available Themes:light, dark, cupcake, etc.

Customizing Colors

TailwindCSS provides utility classes for colors. You can extend or override the color palette in tailwind.config.js: 


module.exports = }
  theme: }
    extend: }
      colors: }
        primary: '#1D4ED8',
        secondary: '#9333EA',
      },
    },
  },
}

Components

Button

Buttons are interactive elements that trigger actions.

Basic Usage

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>

Variants

  • btn-primary: Primary
  • btn-secondary: Secondary
  • btn-accent: Accent

Sizing

  • btn-sm: Small
  • btn-md: Medium
  • btn-lg: Large

Example

<button class="btn btn-primary btn-lg">Large Primary Button</button>

Card

Cards are flexible content containers.

Basic Usage

<div class="shadow-xl card w-96 bg-base-100">
  <figure><img src="/img/sample.jpg" alt="Sample Image" /></figure>
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p>Card content goes here.</p>
    <div class="justify-end card-actions">
      <button class="btn btn-primary">Action</button>
    </div>
  </div>
</div>