Chapter 2 - add global CSS styles with tailwind to root layout

This commit is contained in:
2023-12-27 07:35:47 +01:00
parent 406cea86a3
commit 5a2b499001
3 changed files with 7 additions and 4 deletions

View File

@@ -1,3 +1,5 @@
import '@/app/ui/global.css';
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {

View File

@@ -10,6 +10,7 @@ export default function Page() {
</div> </div>
<div className="mt-4 flex grow flex-col gap-4 md:flex-row"> <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20"> <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
<div className="h-0 w-0 border-b-[30px] border-l-[20px] border-r-[20px] border-b-black border-l-transparent border-r-transparent"/>
<p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}> <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
<strong>Welcome to Acme.</strong> This is the example for the{' '} <strong>Welcome to Acme.</strong> This is the example for the{' '}
<a href="https://nextjs.org/learn/" className="text-blue-500"> <a href="https://nextjs.org/learn/" className="text-blue-500">

2
package-lock.json generated
View File

@@ -1,5 +1,5 @@
{ {
"name": "nextjs-dashboard2", "name": "nextjs-dashboard",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {