Day 23 - Tailwind Plugin 使用 (二) => Typography

这两天大家好像都在绑定数位五倍券和抢银行优惠，还有登记一些抽签的加码券，结果造成系统大当机。威尔猪自己没有特别研究，苦恼不知道该领实体券还是数位绑定好，只是维护系统的工程师...折磨啊！今天威尔猪来讲第 3 种 Plugin，这个插件主要用在文章或部落格，还记得 Tailwind 会清除所有预设样式吧，这样我们就必须重新设定文字大小、粗细、间距等，相对来说肯定会耗时，但 Tailwind 已经将最舒服的文章阅读方式写好了，有点像 Medium 的文章样式，只要我们引入就可以直接使用，那我们来看看该如何设定。

Typography

1. 使用 npm 安装 Typography 外挂。

npm install @tailwindcss/typography

2. 到设定档 tailwind.js.config 新增外挂。

// tailwind.config.js

module.exports = {
  theme: {
    ...
  },
  ...
  plugins: [
    require('@tailwindcss/typography'),
    ...
  ],
}

3. 使用 prose 在标签上就可以了。

<article class="prose">
  <h1>Hello Tailwind Typography -> H1</h1>
  <h2>Hello Tailwind Typography -> H2</h2>
  <h3>Hello Tailwind Typography -> H3</h3>
  <h4>Hello Tailwind Typography -> H4</h4>
  <p>Hello Tailwind Typography -> P</p>
</artic>

当当～这样文字就都帮我们排版好了，几乎文章会使用到的标签，Tailwind Typography Plugin 都已经设定好，诸如 <h1> ～ <h4>、<lead>、<p>、<strong>、<blockquote>、<code>、<pre>、<figure>、<figcaption>、<ul>、<hr> 等，真的省去了调整文字大小、间距的时间，是不是很方便。

而 Typography 预设有 5 种调整文字的大小，RWD 时也可以支援，写法为 {RWD}:prose-{size}，预设大小如下表：

特别要注意的是，如果要将文字调整成 prose-2xl，不可以只单写要调整的尺寸而已，一定要加上 prose prose-2xl，否则样式不会完全吃进去。

下面威尔猪做成 RWD 来缩放文字大小：

<article class="prose lg:prose-xl">
  <h1>Ipsam deleniti voluptas consequatur perspiciatis aperiam veniam fugiat.</h1>
  <p class="lead">
    Minus voluptatum neque nostrum consequuntur rerum temporibus cumque, magnam fuga ipsam dolor fugit culpa et voluptatibus voluptate atque optio assumenda, perferendis excepturi nihil. Quae fugit voluptatum aspernatur. Eum pariatur temporibus minima ullam quo accusantium, sed quia delectus debitis cumque unde exercitationem, at vel totam, ipsa suscipit excepturi ut itaque.
  </p>
  <p>
    Nihil quo assumenda <a href="#">tenetur dicta reprehenderit</a> minus consequatur harum sed eveniet nostrum alias animi laboriosam fugiat aperiam ab dolor enim quod corporis eius quasi iste ipsam, eligendi quis quam. Ea rem a ratione sunt necessitatibus minima natus quae repudiandae non at ex quia maxime accusamus eum, modi aliquid magni labore autem fuga similique doloribus cupiditate dolore eaque. Odio obcaecati alias iste, fugit eveniet et consequatur cumque unde a error quam nulla vero consequuntur illo quidem amet est voluptas tenetur quis soluta sapiente!
  </p>
</article>

我们可以看下方比较图：

不过 Typography 预设是以黑灰色设计为主，原本威尔猪天真的以为只要用 text-{color} 去设定颜色就好，殊不知「代志毋系憨人想诶那麽简单」，必须使用 prose-{color}，然後到 tailwind.config.js 里 theme.extend.typography 去添加想要哪个标签变更为什麽颜色，如果要使用 Tailwind 隐藏版颜色，记得要挂载 tailwindcss/colors，如果预设都使用这颜色，可以直接使用 DEFAULT 就好，若是想要有不同配色，则多写几组，将 DEFAULT 改为自订的名称，如 'sky'，威尔猪这边设定 h1 为 sky 蓝，a 连结设为 violet 紫，hover 变为 pink 红，范例如下：

const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  theme: {
    extend: {
      typography: {
        'sky': {
          css: {
            h1: {
              color: colors.sky['600'],
            },
            a: {
              color: colors.indigo['600'],
              '&:hover': {
                color: colors.purple['600'],
              },
            },
            ...
          },
        },
        ...
      },
      ...
    },
  },
  ... 
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

在 Html 加上刚刚设定的 .prose-sky。

<!-- article.html -->

<article class="prose prose-sky lg:prose-xl">
  <h1>...</h1>
  <p>...</p>
<article>    

当当～这样我们颜色就可以依照专案色系跟标签来自己定义。其实不只色系，连文字大小、间距等，也是使用相同方式来自定义。如果对於文字颜色没有特别要求，单纯使用 Typography Plugin 真的是很便利。威尔猪选一篇之前的文章使用预设样式来当作最後范例，看倌们可以参阅 Typographic DEMO。

User Select

威尔猪这边补充，很多时候你会看到有些文章是不能选取复制，Tailwind 也预设了这项功能，使用方式为 select-none，在上方威尔猪的 DEMO 里，也有使用这项指令，另外也有预设其他的项目，同学们可自行斟酌：

以上就是今天的内容，咱们明天见。