Quick Prototyping with Tailwind and DaisyUI

Published at

2/21/2022

Categories

4 categories in total

Author

7 person written this

kachidk

open

Quick Prototyping with Tailwind and DaisyUI

For quick prototyping I use Tailwind and DaisyUI CDNs.
Note: The order of the CDNs.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<link href="./theme.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet" type="text/css" />

To customize the default theme of DaisyUI, copy and paste the CSS variables into theme.css.
Note: The colors are in HSL format.

/* theme.css */

:root {
  --p: 140 52% 55%;
  --pf: 120 100% 25%;
  --pc: 0 0% 100%;
  --s: 314 100% 47.1%;
  --sf: 314 100% 37.1%;
  --sc: 0 0% 100%;
  --a: 174 60% 51%;
  --af: 174 59.8% 41%;
  --ac: 0 0% 100%;
  --n: 219 14.1% 27.8%;
  --nf: 222 13.4% 19%;
  --nc: 0 0% 100%;
  --b1: 0 0% 100%;
  --b2: 210 20% 98%;
  --b3: 216 12.2% 83.9%;
  --bc: 215 27.9% 16.9%;
  --in: 207 89.8% 53.9%;
  --su: 174 100% 29%;
  --wa: 36 100% 50%;
  --er: 14 100% 57.1%;
  --border-color: var(--b3);
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: 0.2s;
  --btn-text-case: none;
  --btn-focus-scale: 0.95;
  --navbar-padding: 0.5rem;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

For Theming
daisyUI comes with a number of themes, which you can use with no extra effort. Each theme defines a set of colors which will be used on all daisyUI elements. To use a theme, add data-theme attribute to your tag.

<html data-theme="light"></html>

dev-resources.site

Quick Prototyping with Tailwind and DaisyUI