Shadow-CLJS + TailwindCSS 项目教程

Shadow-CLJS + TailwindCSS 项目教程

shadow-cljs-tailwindcssshadow-cljs + tailwindcss项目地址:https://gitcode.com/gh_mirrors/sh/shadow-cljs-tailwindcss

1. 项目的目录结构及介绍

shadow-cljs-tailwindcss/
├── README.md
├── package.json
├── shadow-cljs.edn
├── resources/
│   └── public/
│       └── css/
│           └── site.css
├── src/
│   └── main/
│       └── core.cljs
└── tailwind.config.js

• README.md: 项目说明文件，包含项目的基本信息和使用指南。
• package.json: 定义项目的依赖和脚本。
• shadow-cljs.edn: Shadow-CLJS 的配置文件，用于定义构建和开发环境。
• resources/public/css/site.css: 生成的 CSS 文件，由 TailwindCSS 编译生成。
• src/main/core.cljs: 项目的入口文件，包含主要的 ClojureScript 代码。
• tailwind.config.js: TailwindCSS 的配置文件，用于自定义样式。

2. 项目的启动文件介绍

package.json

{
  "scripts": {
    "dev": "shadow-cljs watch app",
    "release": "shadow-cljs release app"
  }
}

• dev: 启动开发服务器，监听文件变化并自动重新编译。
• release: 生成生产环境的构建版本。

shadow-cljs.edn

{:source-paths ["src"]
 :dependencies []
 :builds {:app {:target :browser
                :output-dir "public/js"
                :asset-path "/js"
                :modules {:main {:entries [main.core]}}}}}

• :source-paths: 指定源代码路径。
• :builds: 定义构建配置，包括目标环境、输出目录和模块配置。

3. 项目的配置文件介绍

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

• purge: 指定需要清理的 CSS 类。
• darkMode: 是否启用暗黑模式。
• theme: 自定义主题样式。
• variants: 自定义变体样式。
• plugins: 添加 TailwindCSS 插件。

shadow-cljs.edn

{:builds {:app {:target :browser
                :output-dir "public/js"
                :asset-path "/js"
                :modules {:main {:entries [main.core]}}
                :devtools {:http-root "public/"
                           :http-port 3000}}}}

• :devtools: 开发工具配置，包括 HTTP 根目录和端口。
• :http-root: 指定 HTTP 服务的根目录。
• :http-port: 指定 HTTP 服务的端口。

通过以上配置，可以实现 Shadow-CLJS 和 TailwindCSS 的无缝集成，快速开发和部署前端项目。

shadow-cljs-tailwindcssshadow-cljs + tailwindcss项目地址:https://gitcode.com/gh_mirrors/sh/shadow-cljs-tailwindcss