notion-blogにtailwind-cssを設定してみた

主に公式サイトともう1つのブログサイトの記事を参考にした。

Installation - Tailwind CSS
The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.

ブログページの「投稿日」の表示を小さくしたいと思ってcssを触ってみたが、どうせならtailwind-css試してみようというノリです。

やってみたら意外とよかったです。

  • before

  • after

設定方法

結論からいうと、公式ページの記事のみでほぼいけます。動けば良かったので、 postcss-import とかも使ってません。

  • tailwindcssをinstall

yarn add tailwindcss

  • tailwind.config.jsを作成

これは以下の記事を参考にしました。

Next.js x tailwindcss で静的サイトを生成する - ざきの学習帳(旧 zackey推し )
技書博のサイトがNext.jsで作成されており、何か自分も開発に携われないかな...と思いつつコードを見てみました。 github.com が、そもそも自分、Reactもチュートリアルをお遊び程度に触った程度のため、どこから手をつければいいかわからん状態でしたorz ということで、勉強目的で、Next.jsを用いてポー...

ただ、公式の記事にある

npx tailwindcss init

で良かった気もします。

  • tailwind cliでcssファイルを作成して配置

まずは適当な場所にstyles.cssをつくりましょう。

@tailwind base;

@tailwind components;

@tailwind utilities;

そしたら、以下のコマンドでシンプルなcssファイルにしてしまいます。

npx tailwindcss build styles.css -o output.css

このoutput.cssを src/styles/tailwind-output.css のように保存しましょう。(ファイル名は適当です)

保存したら、notion-blogでデフォルトで読み取るようにします。

src/pages/_app.tsxを編集して

import '../styles/global.css'
import '../styles/tailwind-output.css'

と今回作成したcssファイルをimportしましょう。

これでdeployすれば反映されます。

コメント