Understanding How Z Index CSS Works

Published on: 2024-06-22

Welcome to my new blog about learning Astro! Here, I will share my learning journey as I build a new website.

What I've accomplished

Installing Astro: First, I created a new Astro project and set up my online accounts.
Making Pages: I then learned how to make pages by creating new .astro files and placing them in the src/pages/ folder.
Making Blog Posts: This is my first blog post! I now have Astro pages and Markdown posts!

What's next

I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.

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

@layer base {
  :root,
  :root[data-theme="light"] {
    --color-neutral: 244 244 245;
    --color-primary: 255 255 255;
    --color-secondary: 82 82 91;
    --color-secondary-light: 161 161 170;
    --color-secondary-dark: 39 39 42;
    --color-accent-light: 83 170 221;
    --color-accent: 29 111 165;
  }
  :root[data-theme="dark"] {
    --color-neutral: 41 46 52;
    --color-primary: 24 24 27;
    --color-secondary: 161 161 170;
    --color-secondary-light: 113 113 122;
    --color-secondary-dark: 244 244 245;
    --color-accent-light: 17 67 99;
    --color-accent: 90 172 226;
  }
}

Sample PHP

echo 'Hello World!';

Sample HTML

<div class="text-base">
  Hello World
</div>