TailwindCSS 从零开始 - 增加 Base 样式

什麽是 Base 样式

概念有点像是 CSSreset，现在网页基本上都会使用 CSS reset，有写过网页一段时间都不陌生，而 Tailwind 有提供一组基底样式，称为 Preflight，基本上就是采用 modern-normalize 啦！

以前一开始学网页是用 CSS reset ，後来就都用 Nomalize 了。

延伸阅读：Day21：小事之 CSS Reset 与 CSS normalize。

然後官网有说到基底预设样式为 box-sizing-reset，为什麽特别提这个呢？

因为预设其实是 box-sizing:content-box，那 border-box 跟 content-box 的差别是什麽?

简单来说，border-box 就是我指定的宽度或高度是多少，网页就会呈现该数值，但如果是 content-box 就会另外加上 border(边框) 的宽度，结果跟预期的结果不同。

从范例可以看到两者不同的在尺寸上不同的变化。

demo: https://codepen.io/hnzxewqw/pen/dyvgrbO

Tailwind 跟 Bootstrap 5 都有加上这个属性。

覆盖原本 base 的设定

在一开始安装 Tailwind 的时候有一个主要的 CSS 档案 style.css，里面会放 Tailwind 三个基本设定内容

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

如果专案的需求是改变 h1 的预设大小，那可以把要改变的内容直接写在 style.css 这只档案内，然後使用 @layer base，再把要更改的属性与值写在里面。如下方范例：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-6xl text-red-500 my-5;
  }
}

这段意思是，我使用 @layer 图层的语法，把 base 的 h1 样式改掉，并且使用 @apply 允许修改整个 h1 的内容， @apply 有点像是把想要的样式合并起来，类似拆模组的概念。

下图为原本的 h1 样式，

此图为修改後的样式，改变样式後记得要重新编译。

覆盖预设文字样式

跟覆盖 base 样式的方法一样，专案需求如果要覆盖样式，官网也提供范例可以参考，而覆盖字体是使用 @font-face 语法，并把相关内容写在其中。

style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-6xl text-red-500 my-5;
  }
  @font-face {
    font-family: Proxima Nova;
    font-weight: 400;
    src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
  }
  @font-face {
    font-family: Proxima Nova;
    font-weight: 500;
    src: url(/fonts/proxima-nova/500-medium.woff) format("woff");
  }
}

如此我就新增了一种字型的粗细度。

使用套件新增字型

官方也提供了另一种方法，如同之前响应式一样，可以直接写在 tailwind.config.js 里面，当作套件来新增。

如果要自订义套件使用，要使用 addBase 这个方法，才能做使用喔！并且所有有使用 addBase 产生的样式，都会被加到 base 的样式中。下方范例就是将自订义 h1~h3 字体大小。

使用方法：

• 在 plugins 的阵列中加上套件的方法，此范例称作 plugin()，此名称可自订义。
• 里面使用一个函式，并给予一个物件，两个属性， addBase,theme。
• 函式里面需用 addBase() 这个方法，并且塞入物件，此物件就是要修改的文字属性内容。

tailwind.config.js

//引入刚刚新增的字型 plugin
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") },
      });
    }),
  ],
};

完成後，就设定好文字的套件罗！

参考资料

• Tailwind CSS - Adding Base Styles
• 【Tailwind CSS 教学 - 6】我知道你懂 CSS Reset，但你懂 base 全站样式设定吗？