Tailwind CSS not working with Next JS 12, but works with Next JS 11

Question

I've set up tailwind css for my project with next js v12. I've set up purging and file imports accordingly and it should style the components/pages correctly. However.. It doesn't. No errors or anything. But when I rollback to Next JS v11, the styling gets applied when I don't change any code. I'm failing to understand why this is an issue for me as it seems it's not a common issue.

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: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

globals.css

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


@layer base {
  html,
  body {
    padding: 0;
    margin: 0;
  }
  
}

_app.tsx

import "../styles/globals.css";
import "tailwindcss/tailwind.css";

import type { AppProps } from 'next/app'

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

export default MyApp

Jae · Accepted Answer · 2021-11-26 21:06:03Z

0

I forgot to restart my damn application for the config to compile when I made changes to it.

answered Nov 26, 2021 at 21:06

Jae

1161 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tailwind CSS not working with Next JS 12, but works with Next JS 11

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related