Skip to content

Commit

Permalink
fix: closes #102, CSS layer order issue
Browse files Browse the repository at this point in the history
  • Loading branch information
hunghvu committed Dec 26, 2023
1 parent 093c104 commit bc0feed
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 4 deletions.
2 changes: 0 additions & 2 deletions apps/web/app/global.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@layer tailwind-base, primereact, tailwind-utilities;

@layer tailwind-base {
@tailwind base;
}
Expand Down
12 changes: 10 additions & 2 deletions apps/web/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
*/

import React from 'react';
import Script from 'next/script';
import Provider from './provider';
import { geist } from './_components/fonts';

Expand All @@ -16,8 +17,6 @@ import './global.css';
import 'primeicons/primeicons.css';
import 'primereact/resources/themes/lara-dark-teal/theme.css';



export const metadata = {
metadataBase: new URL(process.env.NEXT_PUBLIC_BASE_URL!),
verification: {
Expand All @@ -36,6 +35,15 @@ const Layout = ({
<html lang='en'>
{/* Font family is applied to native HTML elmenets. */}
{/* For PrimeReact components, we need to specify at root component level. */}
<Script id='css-layers'>
{`
const cssLayerOrder = document.createElement('style');
cssLayerOrder.innerHTML = '@layer tailwind-base, primereact, tailwind-utilities;';
cssLayerOrder.setAttribute('type', 'text/css');
document.querySelector('head').prepend(cssLayerOrder);
`}
</Script>

<body className={geist.className}>
<Provider>{children}</Provider>
</body>
Expand Down

0 comments on commit bc0feed

Please sign in to comment.