TailwindCSS 从零开始 - 使用官方套件，以 typography 为例

tailwindcss

除了可以把样式元件化，功能模组化外，Tailwind 也提供自定义套件的方式给开发者使用，看个人习惯怎麽用，就怎麽用，不过我自己觉得是自定义套件比较会用在框架之中，如何使用就看个人罗！

自订样式套件起手式

自定义套件是写在 tailwind.config.js 这支档案中，并且要指定引入哪一个自定义套件，在 plugins 的阵列中使用函式来设定，函式用一个物件给与数个函式名称，我自己常用的分别为：

addUtilities(), 注册新的功能样式。
addComponents(), 注册新的元件样式。
addBase(), 注册新的基本样式。
addVariant(), 注册自定义变体。
theme(), 找寻使用者在主题已配置的值。
variants(), 找寻使用者在变体中已配置的值。

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, addComponents, e, prefix, config }) {
      // Add your custom styles here
    }),
  ]
}

以上就针对我自己最近常用的几个来做介绍。

使用官方套件

在介绍自定义套件之前，先介绍官方也有提供的套件与使用，官方文件表示：直接使用。只要在 tailwind.config.js 的 plugins 属性中放入官方提供的套件，并且安装其指令就可以使用。

typography 排版

安装指令：

npm install @tailwindcss/typography

tailwind.config.js

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

HTML

使用时，要先输入 prose 後面再继续给 prose-xl 的样式才吃得到喔！如下方所示，这个套件有支援响应式。

 <article class="prose sm:prose-xl">
  <h1>This is Title</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit obcaecati
    temporibus delectus et eaque non enim, consequatur illum velit sapiente
    molestiae soluta voluptatibus omnis quasi dolores maxime officiis at vero!
  </p>
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aut dignissimos
    quasi pariatur nobis ipsa ullam! Commodi modi, saepe eveniet soluta numquam
    quasi ducimus, corrupti architecto distinctio dignissimos alias nesciunt
    doloribus?
  </p>
  <!-- ... -->
</article>

再打开浏览器就会看到套件设定的排版样式。

typography

除了预设样式外，也提供五种不同的排版样式设定：

prose

并且还提供七种颜色可以选择，

color

自订颜色与排版内容

官方提供一个范例，若想要自订自己的排版内容，可以依照范本去设定自己喜欢的内容，两种设定方式：

extends 加入样式

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#333',
            a: {
              color: '#3182ce',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

包装成函式

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme('colors.gray.800'),

            // ...
          },
        },
      }),
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

还有更多设定方式可以参考官方文件，

其他官方套件如下：