iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

TailwindCSS - 從零開始系列 第 15

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.jsplugins 屬性中放入官方提供的套件,並且安裝其指令就可以使用。

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'),
    // ...
  ],
}

還有更多設定方式可以參考官方文件

其他官方套件如下:

小結

透過使用官方套件知道一件事情,就是要先安裝套件,然後引入套件,並且可自行做設定。

參考資料


上一篇
TailwindCSS 從零開始 - 新增自己的 Utility
下一篇
TailwindCSS 從零開始 - 自訂 addBase 套件
系列文
TailwindCSS - 從零開始30

尚未有邦友留言

立即登入留言