Export project with Nextjs Tailwind Emotion loses tailwind css styles

Question

I'm starting a new Next.js project that has existing emotion.js styles, now I'm trying to add tailwind, via this instruction https://tailwindcss.com/docs/guides/nextjs

Here is my postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

and tailwind.config.js

module.exports = {
    purge: [
        './pages/**/*.js', 
        './components/**/*.js',
        './lib/**/*/js'
    ],
    darkMode: 'class', // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: []
}

and next.config.js

module.exports = {
    images: {
        domains: [
            'user-images.githubusercontent.com'
        ]
    },
    typescript: {
        ignoreBuildErrors: true
    },
    eslint: {
        ignoreDuringBuilds: true
    }
}

Here is how I use Tailwind in /styles/global.css

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

and include that css in /pages/_app.js

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

All styles look OK when I run next dev, but when I do next build && next export, it exports to /out folder but when I try running index.html it has no tailwind styles, however my emotion.js styles are still working.

I've tried searching all answers here about this but none of them work.

I suspect it has to do with conflicts with emotion.js with instruction like jsxImportSource

Here is how I use emotion.js. It runs fine during development though

/** @jsxImportSource @emotion/react */
import { useState, useEffect } from 'react';
import { css, jsx } from '@emotion/react'


function App() {

}

The problem is the relative stylesheet link in generated out/index.html https://stackoverflow.com/questions/58784444/nextjs-export-is-broken-no-css-no-js — onmyway133, Jul 15 '21 at 22:54

onmyway133 · Answer 1 · 2021-07-16T08:14:02.020

After checking the generated out/index.html I found out that the stylesheet has an absolute link, changing it to a relative link fixes the issue.

Change from

<link rel="preload" href="/_next/static/css/c8843280217d36ba4773.css"

to

<link rel="preload" href="./_next/static/css/c8843280217d36ba4773.css"

Not sure what it is this way, there seems to be discussion about Use relative URLs instead of absolute but for now I make a custom script that auto-update the link to be a relative path

htmlContent
    .replace('link rel="stylesheet" href="/_next/static', `link rel="stylesheet" href="./_next/static`)

Export project with Nextjs Tailwind Emotion loses tailwind css styles

1 Answers1