Gatsby で Tailwind

ホームページを作成するためには css が必要です。

参考サイトにも他のサイト・YouTube にも Tailwind が大人気のようなので使ってみます。

TailwindCSS、PostCSSをインストール

PostCSSをインストールします。

cd ~/my-gatsby-site
yarn add gatsby-plugin-postcss

Tailwind をインストールしてファイルを作成します。

cd ~/my-gatsby-site
yarn add tailwindcss --dev
yarn tailwindcss init
touch ~/my-gatsby-site/postcss.config.js
mkdir ~/my-gatsby-site/src/utils
touch ~/my-gatsby-site/src/utils/global.css

各ファイルの設定

~/my-gatsby-site/gatsby-config.js

module.exports = {
  /* Your site config here */
  plugins: [
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-postcss`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images/`,
      },
    },
  ],
}

~/my-gatsby-site/postcss.config.js

const tailwind = require('tailwindcss')
 
module.exports = () => ({
  plugins: [tailwind('./tailwind.config.js')],
})

~/my-gatsby-site/src/utils/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

~/my-gatsby-site/src/components/layout.js

import React from "react"
import Header from "../components/header"
import Footer from "../components/footer"
import '../utils/global.css'

export default ({ children }) => (
  <> {/* <React.Fragment>の省略形 */}
    <Header />
    {children}
    <Footer />
  </>
)

~/my-gatsby-site/src/pages/index.js

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"

export default () => (
  <Layout>
    <div>
      <p>トップページのメインコンテンツ！</p>  
      <Link to={"/second/"}>Secondページへのリンク</Link>
      <div class="w-1/2">
        <Image filename="sample1.jpg" alt="サンプル画像" />
      </div>
    </div>
  </Layout>
)

~/my-gatsby-site/tailwind.config.js

module.exports = {
  purge: ["./src/**/*.js"], 
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

style は各ファイルに直接書き込む

Tailwind css を使う場合は、基本的には細かいスタイルはそれぞれの要素に直接書き込むようです。

非常に面倒な感じがしますが、確かに以前は css を読み込んで反映させるのは便利ではあるものの、たくさん作りすぎて混乱したこともあり、また新しい css を作って複数の css を読み込むようにするとわけがわからなくなることもありました。

一つ一つの要素に対して、省略化された class を直接書き込むのは何も知らない今の段階では面倒ですが、パターンは限られているので、その方がいいかもしれません。

試みにちょっと作ってみました。

~/my-gatsby-site/src/pages/index.js

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import Image from "../components/image"

export default () => (
  <Layout>
    <div>
      <div class="text-blue-700 hover:text-orange-600 mx-0 my-5">
        <Link to={"/second/"}>Secondページへのリンク</Link>
      </div>
      <div>
        <Image filename="sample1.jpg" alt="サンプル画像" />
      </div>
      <p class="my-3 text-black:600">初めての Gatsby です。</p>  
      <p class="my-3 text-black:600">
        このページは Gatsby と Tailwind によって作成されています。<br></br>
        p要素内での改行は難しい。
      </p>
    </div>
  </Layout>
)

他にも、header.js や footer.js を適当に書いて、

このページはセンスはありませんが、なるほど簡単です。

同じようなページなら、コピペでどんどん作成できると思います。