[Next.js] Tailwind CSS SSR 적용

1. tailwindcss-cli, raw-loader 설치

node version 12 이상 필요

yarn add -D tailwindcss-cli raw-loader

2. script 이용해서 tailwindSRR.css 빌드

{
  "scripts": {
    "prebuild": "tailwindcss-cli build -o styles/tailwindSSR.css"
  },
  "dependencies": {
    "raw-loader": "^4.0.2"
  },
  "devDependencies": {
    "tailwindcss-cli": "^0.1.2"
  }
}

3. next.js의 _document.tsx에서 tailwindSSR.css 적용

raw-loader: 모듈의 내용을 그대로 자바스크립트 코드로 가져옴

import React from 'react';
import Document, { DocumentContext, } from 'next/document';
// @ts-ignore
import bundleCss from '!raw-loader!../assets/styles/tailwindSSR.css';

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const originalRenderPage = ctx.renderPage;
    
    try {
      ctx.renderPage = () => originalRenderPage({
        enhanceApp: (App) => (props) => styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />)),
      });

      const initialProps = await Document.getInitialProps(ctx);

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            <style key="custom" dangerouslySetInnerHTML={{ __html: bundleCss }} />
          </>
        ),
      };
    } finally {
      styledComponentsSheet.seal();
    }
  }
}

출처: https://github.com/vercel/next.js/discussions/12868