初期設定

初期設定をします。

global.css を使う

tailwind は人気のようですが、やはり基本的なところは css を使った方が遥かに便利だと思います。

例えば、<p> 要素の下方のマージンを設定する場合に、

<p class="mb-3">

とするのはとても面倒です。

基本的な部分に留めるべきだと思いますが、やはり基本だけは global.css で設定した方がいいと思います。

body の幅の設定

チュートリアルに従って、global.css を以下のようにしました。

html {
  font-family: sans-serif;
  background-color: rgb(226 232 240);
}
body {
  margin: 0 auto;
  width: 100%;
  max-width: 100ch;
  padding: 1rem;
  line-height: 1.8;
}

シンタックスハイライトの設定

ここでは、Shiki というものを使っています。

npm install --save shiki

global.cssで以下のように設定。

pre {
  padding: 16px;
  background-color: #f4f4f4;
  border-radius: 5px;
  font-size: 14px;
}

何だか色が変な感じですが、とりあえずコレにしておきます。