Use daisyUI with Tailwind CSS Standalone CLI - Daisyui

The command below,

Downloads latest version of Tailwind CSS Standalone executable file for your OS, from GitHub
Downloads latest version of daisyUI bundle file from GitHub
Creates input.css file with Tailwind CSS and daisyUI
Generates output.css file for the first time

Linux or MacOS: (see the install script)

sh:Terminal

curl -sL daisyui.com/fast | bash

Windows: (see the install script)

sh:PowerShell

powershell -c "irm daisyui.com/fast.ps1 | iex"

</div> <label class="tab"> <input type="radio" name="install_options" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-5 me-2 inline-block"> <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor"> <path d="M3.5 5.5l1.5 1.5l2.5 -2.5"></path> <path d="M3.5 11.5l1.5 1.5l2.5 -2.5"></path> <path d="M3.5 17.5l1.5 1.5l2.5 -2.5"></path> <path d="M11 6l9 0"></path> <path d="M11 12l9 0"></path> <path d="M11 18l9 0"></path> </g> </svg> Manual install </label> <div class="tab-content bg-base-100 border-base-300 px-6 py-3 ps-16">

1. Get Tailwind CSS executable

Follow Tailwind CSS guide and get the latest version of Tailwind CSS executable for your OS.

For example:

sh:Terminal

# Run the corresponding command for your OS

# Linux
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64-musl
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64-musl

# MacOS
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64

# Windows
curl -sLo tailwindcss.exe https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe

Make the file executable (For Linux and MacOS):

sh:Terminal

chmod +x tailwindcss

2. Get daisyUI bundle JS file

Run this code to download latest version of daisyUI as a single js file and put it next to Tailwind's executable file.

sh:Terminal

curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui.mjs
curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.mjs

3. Add Tailwind CSS and daisyUI

Add Tailwind CSS and daisyUI to your CSS file.
Address your HTML and other markup files in the source function.

postcss:input.css

@import "tailwindcss";

@source not "./tailwindcss";
@source not "./daisyui{,*}.mjs";

@plugin "./daisyui.mjs";

/* Optional for custom themes – Docs: https://daisyui.com/docs/themes/#how-to-add-a-new-custom-theme */
@plugin "./daisyui-theme.mjs"{
  /* custom theme here */
}

</div> </div>

Build CSS

Run this command to build the CSS file using Tailwind CSS executable.
Using --watch will automatically update the output.css file when you change the input.css file.
For CI/CD, run the command without --watch to generate the output.css file once.

sh:Terminal

./tailwindcss -i input.css -o output.css --watch
# For Windows
tailwindcss.exe -i input.css -o output.css --watch

Now you can use daisyUI class names!