CODEWITHSUNDEEP
reactjsnext.jstailwind-css
Jae
Jae

Reputation: 116

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

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

Upvotes: 0

Views: 570

Answers (1)

Jae
Jae

Reputation: 116

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

Upvotes: 0

Related Questions