Use standalone CLI of TailwindCSS

This commit is contained in:
Akira Tempaku 2024-10-03 02:03:14 +09:00
parent 34eb2e000a
commit b9be244ff6
8 changed files with 46 additions and 24 deletions

2
.gitignore vendored
View file

@ -1,3 +1,3 @@
.qlot .qlot
public/dist.css public/dist.css
node_modules bin/tailwindcss

View file

@ -1,12 +1,35 @@
install: ## Install dependencies TAILWINDCSS_URL=https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
TAILWIND_TARGET=tailwindcss-macos-arm64
BIN_DIR=./bin
TAILWIND_BIN=$(BIN_DIR)/tailwindcss
STYLE_SRC=./public/style.css
STYLE_DIST=./public/dist.css
all: install
install: ## Download TailwindCSS binary and install other dependencies
@echo "Creating bin directory if it doesn't exist..."
mkdir -p $(BIN_DIR)
@echo "Downloading TailwindCSS binary..."
curl -sLO $(TAILWINDCSS_URL)
@echo "Making TailwindCSS binary executable..."
chmod +x $(TAILWIND_TARGET)
@echo "Moving TailwindCSS binary to $(BIN_DIR)..."
mv $(TAILWIND_TARGET) $(TAILWIND_BIN)
@echo "TailwindCSS is ready in $(BIN_DIR)/"
@echo "Installing qlot dependencies..."
@qlot install @qlot install
watch: ## Run watch mode watch: ## Start TailwindCSS in watch mode for automatic rebuilds
@bun run tailwindcss -i ./public/style.css -o ./public/dist.css --watch=always @$(TAILWIND_BIN) -i $(STYLE_SRC) -o $(STYLE_DIST) --watch=always
build: ## Build build: ## Generate the final CSS output
@bun run tailwindcss -i ./public/style.css -o ./public/dist.css @$(TAILWIND_BIN) -i $(STYLE_SRC) -o $(STYLE_DIST)
help: ## Show options help: ## Display available commands and their descriptions
@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | \ @grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | \
awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}' awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-20s\033[0m %s\n", $$1, $$2}'
clean: ## Remove the bin directory and clean up generated files
@echo "Removing $(BIN_DIR)..."
rm -rf $(BIN_DIR)

BIN
bun.lockb

Binary file not shown.

View file

@ -1,6 +0,0 @@
{
"devDependencies": {
"daisyui": "^4.12.2",
"tailwindcss": "^3.4.4"
}
}

View file

@ -17,7 +17,7 @@
("hsx" . ("hsx" .
(:class qlot/source/git:source-git (:class qlot/source/git:source-git
:initargs (:remote-url "https://github.com/skyizwhite/hsx.git") :initargs (:remote-url "https://github.com/skyizwhite/hsx.git")
:version "git-4e83acaae7570b89efaf821809a534e2d5de278e")) :version "git-6f8df3e00da00b977c623cc2e1b42d53d06d259f"))
("ningle-fbr" . ("ningle-fbr" .
(:class qlot/source/git:source-git (:class qlot/source/git:source-git
:initargs (:remote-url "https://github.com/skyizwhite/ningle-fbr.git") :initargs (:remote-url "https://github.com/skyizwhite/ningle-fbr.git")

View file

@ -6,8 +6,18 @@
(defcomp page () (defcomp page ()
(hsx (hsx
(h1 :class "text-primary" (<>
"こんにちは"))) (h1 :class "text-green-600"
"こんにちは")
(div :x-data "{
open: false,
get isOpen() { return this.open },
toggle() { this.open = ! this.open },
}"
(button :@click "toggle()"
"Toggle")
(div :x-show "isOpen"
"Content ...")))))
(defun handle-get (params) (defun handle-get (params)
(declare (ignore params)) (declare (ignore params))

View file

@ -11,7 +11,7 @@
(defcomp page () (defcomp page ()
(hsx (hsx
(h1 :class "text-primary" (h1 :class "text-red-600"
"404 Not Found"))) "404 Not Found")))
(defun handle-not-found () (defun handle-not-found ()

View file

@ -5,10 +5,5 @@ module.exports = {
"./src/routes/**/*.lisp", "./src/routes/**/*.lisp",
"./src/components/**/*.lisp", "./src/components/**/*.lisp",
], ],
theme: { plugins: [],
extend: {},
},
plugins: [
require('daisyui'),
],
} }