BlitzNext.jsの上に設計されているのでTailwindを組み込むのも手間ではない。

必要なモジュールをインストールする。

$ yarn add postcss-preset-env tailwindcss

/postcss.config.js を追加する。PurgeCSSについてはこちらを参考にする。

module.exports = {
  plugins: {
    tailwindcss: {},
    'postcss-preset-env': {},
  },
}

tailwind.config.jsを追加する。

module.exports = {
  purge: ['./app/*'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

/app/styles/index.cssを追加する。

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

/app/pages/_app.tsxではそのファイルを読み込む。

import 'app/styles/index.css'
import { AppProps } from 'next/app'

export const MyApp = ({ Component, pageProps }: AppProps) => {
  return <Component {...pageProps} />
}

export default MyApp

/app/pages/index.tsxを書き換えて動作を確認する。

import { FunctionComponent } from 'react'

const Index: FunctionComponent = () => {
  return (
    <div className={'grid justify-center'}>
      <h1 className={'text-blue-500 text-xl'}>{'Blitz.js + Tailwind CSS'}</h1>
    </div>
  )
}

export default Index