主に公式サイトともう１つのブログサイトの記事を参考にした。
Installation: Tailwind CLI - Tailwind CSS
Documentation for the Tailwind CSS framework.
tailwindcss.com
ブログページの「投稿日」の表示を小さくしたいと思って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を用いてポー...
kic-yuuki.hatenablog.com
ただ、公式の記事にある
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すれば反映されます。
コメント