TailwindCSS 从零开始 - 自订 addBase 套件

修改基底样式 addBase

专案会使用到很多的标题样式，在不同的页面都会出现，那我就可以订一个套件专门给标题使用。
此时就可以使用修改基底样式的函式 addBase() 做修改，参照起手式的方式，我给三个标题不同的字体大小。

const plugin = require("tailwindcss/plugin");

module.exports = {
    purge: {
        enabled: true,
        content: ["./*.html"],
    },
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [
        plugin(function ({ addBase, theme }) {
            addBase({
                h1: { fontSize: theme("fontSize.2xl") },
                h2: { fontSize: theme("fontSize.xl") },
                h3: { fontSize: theme("fontSize.lg") },
            });
        }),
    ],
};

在 plugin 的函式中带入第一个参数是使用的方法，第二个参数是要修改的是什麽，我这边要更换的是 theme 里面的字体大小。

值得注意的地方是，要使用小数点作为连接，不是用连接符号（dash）喔！

重新编译後可以得到下方结果。

打开开发人员工具可以看到，透过套件我已经把预设值改掉了。

h1

h2

h3

参考资料

• TailwindCSS - Adding base styles