How to use in Nextjs

[ntaloventi]

I am trying to use your template in next js, but result not as expected, looks like css override each other

here is my package.json

{
"name": "ace-next-adminone",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"autoprefixer": "^10.2.6",
"next": "11.0.0",
"postcss": "^8.3.5",
"postcss-import": "^14.0.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"tailwindcss": "^2.2.2"
},
"devDependencies": {
"eslint": "7.29.0",
"eslint-config-next": "11.0.0"
}
}

tailwind_config.json

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

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "_app.css";
@import "_navbar.css";
@import "_aside.css";
@import "_title-bar.css";
@import "_button.css";
@import "_hero.css";
@import "_card.css";
@import "_icon.css";
@import "_tiles.css";
@import "_table.css";
@import "_progress.css";
@import "_level.css";
@import "_image.css";
@import "_modal.css";
@import "_notifications.css";
@import "form/_checkbox-radio-switch.css";
@import "form/_form.css";
@import "_footer.css";

Login preview

please info for any clue.
thanks

[vikdiesel]

For login screen:
You need to add form-screen class to the root html element