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

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

微信关注我哦 👍

大象工具微信公众号

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

tags: Tailwind CSS