Gatsby+Tailwindでレスポンシブデザイン

Gatsby+Tailwindでレスポンシブデザイン

Gatsbyでmedia queryを実装する方法について調べました。
セレクタ一つ一つにmedia queryを適用する方法はすぐに分かったのですが、まとめてやる方法がなかなか見つからなかったので記事にします。
私の環境ではPostCSSを使用していますが、emotionでも似たような感じだと思います。

tailwindを使ってmedia query

公式のドキュメントのBreakpointsにも載っていますが、一応ここでも紹介します。

<h1 className="text-1xl md:text-2xl">
	Hello
</h1>

mdやらsmというのを指定すると、画面サイズによって自動で切り替えてくれます。
ちなみに、mdというのは768px以上という意味です。よって、mdだけ指定してもmd未満のやつには適用されません。
よって上記の例では、text-1xlというのを指定していますが、これはmd以下のものを想定しています。

tailwindのmedia queryを拡張する

もしmedia queryを拡張したい場合は、tailwind.config.jsを編集します。tailwind.config.jsをpackage.jsonと同じディレクトリに作成します。 現時点での私のtailwind.config.jsは以下です。

module.exports = {
  theme: {
    screens: {
      xs: '280px',
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
    },
    extend: {},
  },
  variants: {},
  plugins: [],
  purge: {
    // Filenames to scan for classes
    content: [
      './src/**/*.html',
      './src/**/*.js',
      './src/**/*.jsx',
      './src/**/*.ts',
      './src/**/*.tsx',
    ],
    // PurgeCSS options
    options: {
      // Whitelist specific selectors by name
      // whitelist: [],
    },
  },
}

screensのところにデフォルトにはないxsというBreakpointsが追加されています。

media queryでcssファイルに記述する

Breakpointsを使用する方法は便利ですが、まとめてやりたい場合は結構面倒です。
そんな場合はcssファイルに以下のように記述します。ファイルの置き場所はどこでもよいですが、私はsrc/stylesディレクトリの下に置いてます。

.menu {
  @apply text-gray-900;
}

@screen md {
  .menu {
    @apply text-red-500;
  }
}

Reactでmedia queryを利用する

あとは、main.cssをReactで読み込み、classNameでmenuを指定します。

import React from 'react'
import '@/styles/main.css'

const IndexPage = () => 
	<h1 className='menu'>Hello</h1>

export default IndexPage

ちなみに、pathに@エイリアスを指定しているので、上記のコード動かない可能性あります。
gatsby-plugin-alias-importsを使えば解決できますが、別の記事で紹介したいと思います。