工事中

Gatsby v4にTailwind v3を導入する
2021年12月12日
目次
Open TOC
link

環境

使用するGatsbyのテンプレートはgatsby-gitbook-starterを使います (https://github.com/hasura/gatsby-gitbook-starter)。

Gatsbyのバージョンはv4.3.0です。

TailwindCSSはv3.0を使います。

link

注意点

TailwindCSSはv3.x.xからpurgeセクションが消え、contentセクションの追加が必要になりました。

contentセクションではTailwindCSSを適用するファイルを指定します。そのため、contentセクションを書いていないとTailwindCSSが使えません。

link

導入方法

TailwindCSSのチュートリアルを確認しながら導入します。

必要なパッケージを追加します。

1
$ yarn add -D tailwindcss postcss autoprefixer gatsby-plugin-postcss

TailwindCSSの設定ファイルを作成します。

1
$ npx tailwindcss init -p

postcssのGatsby Pluginを追加したので、gatsby-config.jsにも追記します。

gatsby-config.js
1
module.exports = {
2
plugins: [
3
// ...
4
'gatsby-plugin-postcss',
5
// ...
6
],
7
}

TailwindCSSの設定ファイルを修正し、TailwindCSSを適用させたいファイルをしていします。

tailwind.config.js
1
module.exports = {
2
content: [
3
"./src/**/*.{js,jsx,ts,tsx}",
4
],
5
theme: {
6
extend: {},
7
},
8
plugins: [],
9
}

src/utils/tailwind.cssを作成し、Tailwindのレイヤーを取り込みます。

src/utils/tailwind.css
1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;

gatsby-browser.jsでTailwindCSSを読み込みます。

gatsby-browser.js
1
import './src/utils/tailwind.css'

あとは、TailwindCSSの適当なクラスを当ててみて反映されるかどうかを確認できたら、完了です。

自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
最近の活動
技術書典12 (2022.1.22 - 2022.1.30) で本を出しました。
2021年に登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
TailwindCSSv3やRailway, Partytown, Nextjs12なんかの紹介やChrome DevToolsやChrome Extensions Manifest V3などの話を書いてます。
うぇぶちぇんじろぐ2022
サイトマップ
Notes
業務や趣味での気づき・メモ
Scraps
雑記。ネットで見つけた面白い記事やニュース
Snippets
記事にするまでもないけど、便利なコマンドや豆知識