如何修改样式

2022-01-01

fungo 推荐使用tailwindcss作为样式库

已配置 tailwindcss

  • 安装环境

    cd your-theme-path

npm install

  • 监控改动

    sh watch.sh

  • 更新样式

    当在template中添加或修改 tailwindcss，后会自动编译更新

未配置 tailwindcss

  • 安装环境

    cd your-theme-path

    npm install -D tailwindcss

npx tailwindcss init

npm install -D @tailwindcss/typography

  • 添加配置

    添加 tailwind.config.js

    1module.exports = {
2	content: ["./templates/*.html"],
3	theme: {
4		extend: {},
5	},
6	plugins: [require("@tailwindcss/typography")],
7};

  • 引用文件

    cd your-theme-path/css

    添加 input.css

    1@tailwind base;
2@tailwind components;
3@tailwind utilities;

  • 使用样式

    引用 output.css

     1{{define you-template-name}}
 2<!DOCTYPE html>
 3<html lang="en">
 4  <head>
 5    <meta charset="UTF-8" />
 6    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 8    <title>Document</title>
 9    <link rel="stylesheet" href="/assets/css/output.css" />
10  </head>
11  <body>
12    <main>write-you-customize-code-here</main>
13  </body>
14</html>
15{{end}}

  • 监控改动

    sh watch.sh

  • 更新样式

    当在template中添加或修改 tailwindcss，后会自动编译更新