多主题对应独立的 tailwind css 编译规则

需求背景

在一套网站代码里，嵌入多套页面模板主题。

这样就需要每个独立的主题都有一个独立的 css 文件。

而我使用的 tailwind css，那么就需要对每个 css 文件进行编译。原来的单一文件配置，需要做下调整。

现有的 tailwind 编译机制

Makefile 中的快捷命令：

.PHONY: tailwind 
tailwind:
	npx tailwindcss -i ./css/main.css -o ./public/css/main.css --watch

tailwind 配置文件：

> cat tailwind.config.js
module.exports = {
  content: ["./templates/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

调整点

1. 每个主题一个 tailwind 配置文件
2. Makefile 中的命令，读取 .env 文件中的主题名，然后使用该主题对应的目录拼接出 css 路径。
3. 指定配置文件。

指定配置文件的方式：

When you use a custom file name, you will need to specify it as a command-line argument when compiling your CSS with the Tailwind CLI tool:

npx tailwindcss -c ./tailwindcss-config.js -i input.css -o output.css

参考：

https://tailwindcss.com/docs/configuration

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式

tags: Tailwind CSS