2020/8/21
Tag : tailwind-css craft-cms graphql

Gatsby と Tailwind CSS を使ったコンテンツに Tailwind CSS Typography でいい感じにスタイルを適用する

勉強がてら Tailwind CSS を触ってみている。

Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs
https://tailwindcss.com/

class の使い方を覚えていかないとなかなか時間はかかるのだけど、どんな感じだったかさえ覚えておければ作るイメージがあるときは使いやすい気がする。
まぁセンス的なものが必要かもしれないと言えばそういう気もするから、厳しいところもあるが。

Tailwind CSS を使うときはブラウザ標準のスタイルは基本的にクリアされる。
ブログ記事とかリッチエディタで書いたようなシンプルな HTML にスタイルを当てるのに、 Tailwind CSS Typography プラグインが便利そうだった。

紹介ブログ : https://blog.tailwindcss.com/t…
サンプル : https://tailwindcss-typography…

特に意識せずデフォルトの状態だと先日の記事がこんな感じ。

20200821-0337.png

プラグイン適用するとこんな感じでいい感じのスタイルが当たる。

20200821-0339.png

Tailwind CSS のユーティリティクラスの考えと逆みたいな感じではあるが、、、、
リッチエディタ内で class 振ったりしてもらうのが大変だったりする場合は使いやすい。

ドキュメントにもある感じで

<article class="prose lg:prose-xl">
  {richeditor}
</article>

みたいにリッチエディタのコンテンツを囲めばスタイルが当たる。

まぁ、特定のクラス内のスタイルとかは

<article class="contentbody">
  {richeditor}
</article>

~~~~~

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

.contentbody h2 {
  @apply text-xl;
}
.contentbody h3 {
  @apply text-lg;
}
.contentbody p {
  @apply mb-4;
}
.contentbody a {
  @apply text-blue-600 underline;
}

みたいな使い方でもいけるんじゃないかという気はするが。

Craft CMS の GraphQL と Gatsby, Next.js とかであーだこーだやって遊んでいるなかで

# Using npm
npm install @tailwindcss/typography

# Using Yarn
yarn add @tailwindcss/typography

でプラグインをインストールして、  tailwind.config.js に

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

を書いて、さっきのかんじで prose で囲むだけでつかえるのもありがたい。

issue を見ている限りでは、適用されたスタイルをあーだこーだしたいというのが多いみたいで、結局のところ悩みはつきないと言うことなんだろう、、、、

← 記事一覧に戻る