使用的是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文件即可
