Posted onFeb 21, 2022 • Edited onMar 24, 2022

Quick Prototyping with Tailwind and DaisyUI

#tailwindcss #daisyui #productivity #design

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

<linkhref="https://cdn.jsdelivr.net/npm/daisyui@1.25.4/dist/full.css"rel="stylesheet"type="text/css"/><linkhref="./theme.css"rel="stylesheet"/><linkhref="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css"rel="stylesheet"type="text/css"/>

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

/* theme.css */:root{--p:14052%55%;--pf:120100%25%;--pc:00%100%;--s:314100%47.1%;--sf:314100%37.1%;--sc:00%100%;--a:17460%51%;--af:17459.8%41%;--ac:00%100%;--n:21914.1%27.8%;--nf:22213.4%19%;--nc:00%100%;--b1:00%100%;--b2:21020%98%;--b3:21612.2%83.9%;--bc:21527.9%16.9%;--in:20789.8%53.9%;--su:174100%29%;--wa:36100%50%;--er:14100%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.