Trouble building and exporting TailwindCSS & NextJS

Admin 1
Viewed 339

I am having difficulty building & exporting my TailwindCSS & NextJS project. When working with npm run dev, the project works perfectly and I am able to use all the Tailwind classes. When I run npm run build && npm run export, all the Tailwind CSS stylings disappear and the generated index.html file does not have any CSS styling.

Package.json: 

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export"
  },
  "dependencies": {
    "@headlessui/react": "^1.4.0",
    "@heroicons/react": "^1.0.2",
    "next": "11.0.1",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.3.1",
    "eslint": "7.30.0",
    "eslint-config-next": "11.0.1",
    "postcss": "^8.3.6",
    "tailwindcss": "^2.2.7"
  }
}

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      zIndex: {
         '-10': '-10',
      }
    }
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

App.js

import 'tailwindcss/tailwind.css'

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

export default MyApp

I feel like the npm run build && npm run export is not calling any Tailwind build commands. I cannot find any instructions on how to actually build the TailwindCSS project with NextJS on their documentation.

tailwind-css npm next.js reactjs javascript
1 Answers

I am positive your problem is in package.json

...
"build:style": "tailwind build src/styles/index.css -o src/styles/tailwind.css",
...

when you run build you are catching the above.

But you need this one:

"build": "next build",

here's an example of one of my working next.js projects

...
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
...
user_151002740
Related