技術ブログの記事Styleをいい感じにする

概要

前回 の続き
blog-starter-typescript で作った技術ブログの記事のスタイルが微妙なので、いい感じにStyleを当て直す

作業ログ

配色を決める

配色わからないので、 coolors.co を使って良さげなものを探す。 今回は、Red/Black/White 三色ぐらいで締まった感じにしたかったのでその三色で検索をかけて選んだ。

選んだのはこれ

その後 tailwind.config.js のthemeに色設定を入れておく

{
//...
  theme: {  
    extend: {  
      colors: {  
        background: {  
          dark: '#2B2D42',  
          light: '#8D99AE'  
        },  
        surface: '#EDF2F4',  
        primary: {  
          light: '#EF233C',  
          dark: '#D90429'  
        }  
      }  
    }  
  },  
//... 
}

@tailwindcss/typography の導入

公式の手順 に沿って導入する

まず依存関係の追加

yarn add -D @tailwindcss/typography

その後 tailwind.config.js のpluginに追加する

- plugins: []
+ plugins: [require('@tailwindcss/typography')] 

markdown-styles.module.css の変更

こんな感じでページ全体で使うコンポーネントに背景色とテキスト色を設定しておく

// layout.tsx
<div className="min-h-screen bg-background-dark text-surface">

その上で、こんな感じで記事に反映されるCSSを変更する

/* markdown-styles.module.css */
.markdown {
  @apply prose prose-invert tracking-wide;  
  
  /* Headings */  
  @apply prose-headings:mb-4 prose-headings:border-b prose-headings:border-background-light prose-headings:pb-1 prose-headings:font-normal prose-headings:leading-snug prose-headings:text-background-light;  
  @apply prose-h2:mt-12 prose-h2:text-2xl;  
  @apply prose-h3:mt-8 prose-h3:text-xl;  
  @apply prose-h4:mt-8;  
  
  /* a */  
  @apply prose-a:text-primary-light prose-a:no-underline hover:prose-a:underline prose-a:visited:text-primary-dark;  
  
  /* コード */  
  @apply prose-code:before:content-none prose-code:after:content-none;  
  @apply prose-pre:rounded-tl-none prose-pre:bg-[#0d1117] prose-pre:p-2 prose-pre:shadow-lg;  
  
  /* ul, li */  
  @apply marker:text-primary-dark prose-li:p-0 prose-li:m-1;  
}