Tailwindcss with SSR

[sambhav-gore]

I used the official example from here https://github.com/zeit/next.js/tree/canary/examples/with-tailwindcss

You can see it deployed here - https://next-js-tailwind-ex.now.sh/

My Question is that I am unable to figure out how to do it correctly with SSR so that the initial response from server contains the styles within head (inline in the file).

@taylorbryant you have any tips for this may be ? Thank you for putting up the example btw and also for updating it to the latest updates from tailwindcss.

[cdock1029]

Do you have a link to your code that isn't working? The linked example seems to work fine, so isn't much help.

Did you import your .css in _app.js ?

https://github.com/cdock1029/with-tailwind/blob/master/pages/_app.js

https://with-tailwind.cdock.now.sh/

[sambhav-gore]

no, I mean I want the server side response to come along with the css inline. As of now it loads css afterwards. so if you look at the network inspector, the styles are not part of the initial (very first response) :

For comparison, following is a what comes from Alligator io (what I am trying to achieve):

I was able to do it with NextJS with JSS in an earlier project, but what I am not understanding is that how to combine the two approaches. It is for sure possible to extract the css from the tree but not sure how to go about in-lining that.

[cdock1029]

Ahh yes, my fault. Didn't pay attention to what you were saying.

[taylorbryant]

@sambhav-gore Thanks for the kind words!

I've actually never tried inlining CSS in the head in Next.js.

A quick search turned up these. Maybe they'll be helpful?

• https://www.npmjs.com/package/next-critical
• https://stackoverflow.com/questions/57057947/how-to-inline-css-in-the-head-tag-of-a-nextjs-project

[sambhav-gore]

thanks I will check them out in the weekend probably.

[zhe]

Thanks for pointing out.

[JamesSingleton]

So I too am running into this issue. I have a Header component that looks like this

import Link from 'next/link';
import styles from "@/styles/Header.module.css";

const Header = () => (
  <div className="container mx-auto relative bg-white">
    <div className="max-w-7xl mx-auto ">
      <div className="flex justify-between items-center border-b-2 border-gray-200 py-6 md:justify-start md:space-x-10">
        <div className="lg:w-0 lg:flex-1">
          <Link href="/">
            <a className="flex">
              <span>Original Harvest</span>
            </a>
          </Link>
        </div>
        <div className="-mr-2 -my-2 md:hidden">
          <button
            type="button"
            className="inline-flex items-center justify-center p-2  text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
          >
            <svg
              className="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M4 6h16M4 12h16M4 18h16"
              />
            </svg>
          </button>
        </div>
        <nav className="hidden md:flex space-x-10">
          <Link href="/new-arrivals">
            <a className={styles.menuLink}>
              New Arrivals
            </a>
          </Link>
          <Link href="/products">
            <a className={styles.menuLink}>
              Shop by Benefit
            </a>
          </Link>

          <Link href="/learn">
            <a className={styles.menuLink}>
              Learn
            </a>
          </Link>
          <Link href="/sales">
            <a className={styles.menuLink}>
              Sale
            </a>
          </Link>
          <Link href="/about-us">
            <a className={styles.menuLink}>
              About Us
            </a>
          </Link>
        </nav>
        <div className="hidden md:flex items-center justify-end space-x-8 md:flex-1 lg:w-0">
          <a
            href="#"
            className="whitespace-no-wrap text-base leading-6 font-medium text-gray-700 hover:text-gray-900 focus:outline-none focus:text-gray-900"
          >
            Sign in
            </a>
          <span className="inline-flex  shadow-sm">
            <a
              href="#"
              className="whitespace-no-wrap rounded-sm inline-flex items-center justify-center px-4 py-2 border border-transparent text-white leading-6 font-medium bg-gray-900 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150"
            >
              Sign up
              </a>
          </span>
        </div>
      </div>
    </div>
  </div>
);

export default Header;

and my css file looks like

.menuLink {
  color: red;
  @apply text-base leading-6 font-medium text-gray-700;

  &:hover {
    @apply text-gray-900;
  }

  &:focus {
    @apply text-gray-900 transition ease-in-out duration-150;
  }
}

.cta {
  @apply text-center uppercase text-white p-6 bg-black z-10 p-6 font-bold inline-block cursor-pointer;
}

.hero {
  @apply p-12 relative flex flex-col justify-center items-center overflow-hidden  mt-6 rounded-md relative;
  min-height: 400px;

  h1 {
    @apply p-6 text-white font-medium z-10 text-4xl font-bold text-center;
    background-color: #811A40;

    @screen md {
      @apply text-5xl;
    }
  }

  .cta {
    @apply mt-6;
    background-color: #B5A692;
  }
}

.heroImage {
  @apply w-full object-cover absolute z-0;
  height: 400px;
}

However, when looking at the network tab's preview I get the following which means that it is not SSRing with styles

I have set my NODE_ENV=production run yarn build and yarn start and I still get this. I saw a thread somewhere that styles were not SSR'd during yarn dev so I just wanted to make sure.

[sambhav-gore]

I have marked the above post as an Answer that helped me. Basically you need to inline the styles in the head as explained in - vercel/next-plugins#238 (comment)

[JamesSingleton]

@sambhav-gore does this work in yarn dev or just yarn start?

[JamesSingleton]

Looks to only be when you do a production build.

[arn4v]

I'm trying to follow what needs to be done in the fix mentioned above but unable to follow since I've just started using Next, my project scaffolded using create-next-app --example with-tailwindcss doesn't have a _document.jsx, what changes should I be making?

[JamesSingleton]

@arn4v, you don't need a _document.jsx. But if you need it, you can do something like

class InlineStylesHead extends Head {
  getCssLinks() {
    return this.__getInlineStyles()
  }

  __getInlineStyles() {
    const { assetPrefix, files } = this.context._documentProps
    if (!files || files.length === 0) return null

    return files
      .filter((file) => /\.css$/.test(file))
      .map((file) => (
        <style
          key={file}
          nonce={this.props.nonce}
          data-href={`${assetPrefix}/_next/${file}`}
          dangerouslySetInnerHTML={{
            __html: fs.readFileSync(path.join(process.cwd(), '.next', file), 'utf-8'),
          }}
        />
      ))
  }
}

and then include <InlineStylesHead /> in your return

[JamesSingleton]

Just an FYI for anyone that sees this, 9.5.2 on up this.context._documentProps is undefined. Due to this, my solution won't work anymore.

[alexandregiordanelli]

if someone has not yet succeeded, try this:

_document.tsx

// @ts-ignore
import bundleCss from "!raw-loader!../styles/tailwindSSR.css";
import Document from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(ctx: any) {
    const page = ctx.renderPage((App) => (props) => <App {...props} />);
    const initialProps: any = await Document.getInitialProps(ctx);
    return {
      ...page,
      styles: [
        ...initialProps.styles,
        process.env.NODE_ENV === 'production' ? <style
          key="custom"
          dangerouslySetInnerHTML={{
            __html: bundleCss,
          }}
        />: <></>,
      ],
    };
  }
}

package.json

{
 "scripts": {
    "prebuild": "NODE_ENV=production tailwindcss-cli build -o styles/tailwindSSR.css",
    "build": "next build",
  },
}

yarn add -D tailwindcss-cli raw-loader

I dont like it but It works for me

[tmkx]

Sharing another way:

// next.config.js
const { webpack } = require('next/dist/compiled/webpack/webpack');

// config.webpack
const criticalCss = execSync(
  ['npx', 'tailwind', ['--input', 'src/pages/global.scss'], '--minify'].flat().join(' '),
  { cwd: PROJECT_ROOT }
);

config.plugins.push(
  new webpack.DefinePlugin({
    CRITICAL_CSS: JSON.stringify(criticalCss),
  })
);

// _document.tsx
<style dangerouslySetInnerHTML={{ __html: CRITICAL_CSS }} />

[tmkx]

This is a simplified hint, we can define a __DEV__ variable which means process.env.NODE_ENV === 'production', and then:

// _app.tsx
if (__DEV__) {
  // tailwind HMR
  import('./global.scss');
}

with the above answer, we can enjoy HMR in dev while making it SSR in production.

[ThomasVanleynseele]

Adding this to my next.config.js did the job

experimental: {
    optimizeCss: true,
},

reference: https://twitter.com/hdjirdeh/status/1369709676271726599

[flatoy]

To those who want's to save a click:

yarn add critters

// next.config.js
...
experimental: {
    optimizeCss: true,
},
...

then yarn build and yarn start to see if it worked. Didn't work with yarn dev for me.

[Slettan]

This does not seem to work for my app. It's pretty much a fresh Next app with Tailwind, critters and the above config.
From yarn build output:

Inlined 2.44 kB (50% of original 4.8 kB) of _next/static/css/94a2a06adfbdc14e.css.

but when running with yarn start it still does not inline any styles at all.

[anujraghuvanshi]

@Slettan Did you get a solution for this at that moment?

[TheDevCactus]

I was able to solve this myself by utilizing the link elements rel attribute value "preload" which did the trick for me. I wanted to avoid adding the style sheet directly in the head.