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

更新日期: 2022-04-23 阅读次数: 1293 字数: 244 分类: 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

tags: Tailwind CSS

爱评论不评论