Sunns Technologies

Start Development Environment

Get Tailwind CSS executable

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

For example:

# Run the corresponding command for your OS

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

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

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

Make the file executable (For Linux and MacOS):

chmod +x static/tailwindcss

Get daisyUI bundled 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.

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

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.

@import "tailwindcss";

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

@plugin "../js/daisyui.mjs";

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

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.

./static/tailwindcss -i static/css/input.css -o static/css/output.css --watch

Docker

FROM ghcr.io/getzola/zola:v0.17.1 as zola

COPY . /project
WORKDIR /project
RUN ["zola", "build"]

FROM ghcr.io/static-web-server/static-web-server:2
WORKDIR /
COPY --from=zola /project/public /public

docker build -t sunnstech/learn:latest .

docker run --rm -p 9500:80 sunnstech/learn:latest

Docker Compose

docker compose up -d