使用的是tailwindcss v4
我们使用postcss 添加tailwindcss
使用命令postcss进行css的生成
需要下载postcss cli 使用这个命令
1
| pnpm postcss /Users/apple115/CodeSpace/my-blog/src/frontend/styles.css -o /Users/apple115/CodeSpace/my-blog/public/css/main.css --verbose
|
在这个之上在shadow cljs config 中添加一个build-hooks
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| ;; shadow-cljs configuration {:source-paths ["src"]
:dependencies [[reagent "1.3.0"] [re-frame "1.4.3"] [metosin/reitit "0.8.0"] [metosin/reitit-frontend "0.8.0"] ] :dev-http {8081 "public"}
:nrepl {:port 7888}
:builds{:app {:target :browser :build-hooks [(util/run-postcss)] :output-dir "public/scripts" :asset-path "/scripts" :modules {:main {:init-fn frontend.core/run}}}} }
|
在这个build-hooks 添加一个函数调用上面的命令
我在util文件中写的一个 run-postcss
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| (ns util (:require [clojure.java.shell :refer [sh]] [clojure.java.io :as io]))
(defn run-postcss {:shadow.build/stage :compile-prepare} ;;在编译准备之前运行这个函数 [build-state] (let [input-file (io/file "src/frontend/styles.css") output-file (io/file "public/css/main.css") input-path (.getAbsolutePath input-file) output-path (.getAbsolutePath output-file) result (sh "pnpm" "postcss" input-path "-o" output-path "--verbose")] (if (zero? (:exit result)) (do (println "PostCSS 命令执行成功") (println "input-path" input-path) (println "output-path" output-path) ) (do (println "PostCSS 命令执行失败") (println "错误信息:" (:err result)))) result) build-state )
|
最后
这样它就会根据代码生成main.css 文件
然后使用这css文件即可