Trouble getting started with Tailwind and Shadcn

[halcyon zephyr]

Howdy. I know it's not part of Astro docs, but I followed https://ui.shadcn.com/docs/installation/astro to get started with using with Astro but I'm having trouble. I did also check the Astro docs on tailwind and having trouble.

Here's my index for example:

---
import Layout from '../layouts/Layout.astro';
import '@/styles/globals.css'
---

<Layout title="Welcome to Astro.">
    <main>
        <p class="font-bold text-red-400">test</p>
    </main>
</Layout>

The classes in <p> for example aren't rendering and it's just a black text. I ran npx astro add tailwind and ran with it but it doesn't seem to have done anything at least it's not working:

npx astro add tailwind
✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭────────────────────────────────────────────────────╮
 │ npm install @astrojs/tailwind tailwindcss@^3.0.24  │
 ╰────────────────────────────────────────────────────╯

✔ Continue? … yes
✔ Installing dependencies...

  Astro will generate a minimal ./tailwind.config.cjs file.

✔ Continue? … yes

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │ import react from "@astrojs/react";           │
 │                                               │
 │ import tailwind from "@astrojs/tailwind";     │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [react(), tailwind()]         │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

✔ Continue? … yes
  
   success  Added the following integration to your project:
  - @astrojs/tailwind

Any ideas what I'm doing wrong?

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "react",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@/components/*": ["src/components/*"]
  },
},
}

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
    ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

globals.css

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

[rocky jungle]

Your Tailwind config does not include Astro files in its content array

[halcyon zephyr]

ah, I'm braindead