Contents
daisyUI
Ready-made components on top of Tailwind CSS: buttons, cards, menus and modals with short classes, plus themes.
1.Getting started
- What daisyUI isA library of ready-made components for Tailwind CSS: how it relates to Tailwind, how to try it from a CDN and what the course covers.
- Installing with ViteHow to create a Vite project, add Tailwind CSS 4 and plug in daisyUI 5 with an @plugin line in the CSS file.
- How classes are builtComponent, part and modifier: how to read and combine daisyUI classes like btn btn-primary btn-sm.
2.Colors and themes
- Semantic colorsdaisyUI colors named by purpose: primary, secondary, base, info, error and the -content pairs, utilities like bg-primary and text-base-content.
- Built-in themesdaisyUI's built-in themes, the data-theme attribute, a theme for part of the page and choosing themes in the plugin settings.
- Switching themesHow to change the theme with a button: data-theme from JavaScript, remembering the choice in localStorage and the theme-controller class with no script.
- A custom themeHow to make a theme in your brand colors: --color-* variables, --radius-* corners, the @plugin daisyui/theme block and tweaking a built-in theme.
3.Components
- ButtonsThe btn component: colors, the outline, soft, ghost and link styles, sizes, round and wide buttons, links that look like buttons.
- CardsThe card component: an image in figure, card-body, card-title and card-actions, a border, a horizontal card and a grid of course cards.
- Navbar and menuThe navbar and menu components: a three-part site header, horizontal and vertical menus, group titles, the active item and nested lists.
- DropdownThe dropdown component: a menu on details and summary, the focus-based variant, dropdown-end alignment and opening on hover.
- ModalThe modal component on the dialog tag: opening with showModal, closing with a method=dialog form, closing on a backdrop click and window placement.
- DrawerThe drawer component: a slide-out panel on a checkbox, the drawer-toggle, drawer-content and drawer-side parts, a permanent sidebar on wide screens with lg:drawer-open.
- TabsThe tabs component: a row of tabs with tab-active, the tabs-box, tabs-border and tabs-lift styles, tabs with content on radio buttons.
- Collapse and accordionThe collapse component: a title and hidden content, the arrow and plus icons, opening on a checkbox or details, and an accordion made of radio buttons.
- Alerts, badges and loadingFeedback components: alert for messages, badge for labels, toast for pop-up notifications and loading for a progress indicator.
4.Forms and data
- Text fields and fieldsetThe input and textarea fields in daisyUI, colors and sizes, grouping fields in a fieldset with a legend, label captions and hints.
- Select, checkbox and toggleThe select, checkbox, radio and toggle components: picking from a list, checkboxes and radio buttons, toggles and their captions.
- Tables and statsThe table component with table-zebra stripes and scrolling on narrow screens, and the stats component for key numbers in the dashboard.
5.Practice
- Responsive layoutHow to combine daisyUI components with Tailwind's responsive prefixes: a hamburger menu in the navbar, a hero block, a card grid and modifiers with sm:, md:, lg:.
- Customizing components with utilitiesHow to change daisyUI components with Tailwind classes: sizes, corners, padding, why a utility beats a component, the ! suffix and when to change the theme instead.
- Building for productionHow to build a daisyUI project with npm run build: only the components you use and the chosen themes end up in the CSS, and why class names must not be glued together from pieces.