Astro Framework + ShadcnUI + Vercel v0

Projeto Astro com React, Tailwind CSS, shadcn/ui e Open v0

Este guia fornece instruções detalhadas para configurar um projeto utilizando Astro com integração de React, Tailwind CSS, shadcn/ui e a Open v0 da Vercel.

⚠️ Importante

Antes de começar, recomendo a leitura das documentações oficiais para entender melhor as tecnologias utilizadas:

• Astro
• TailwindCss
• shadcn/ui
• Open v0

📋 Descrição

Este projeto demonstra como configurar um site Astro utilizando as tecnologias mencionadas para criar interfaces modernas e interativas.

🛠️ Pré-requisitos

• Node.js (versão 14 ou superior)
• npm ou yarn

🚀 Configuração do Projeto

1. Crie um novo projeto Astro:

   npm create astro@latest

2. Selecione as opções padrão e escolha um template para iniciar com arquivos de exemplo.

3. Integre React, Tailwind CSS e shadcn/ui:

   Para adicionar React:

   npx astro add react

   Para adicionar Tailwind CSS:

   npx astro add tailwind

4. Configure os estilos globais do Tailwind CSS:

   a. Crie o arquivo styles/globals.css na pasta src:

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

   b. Importe o arquivo globals.css no src/pages/index.astro:

   ---
   import '@/styles/globals.css';
   ---

   c. Atualize o astro.config.mjs para evitar aplicação duplicada dos estilos base do Tailwind:

   import { defineConfig } from 'astro/config';
   import tailwind from '@astrojs/tailwind';
    
   export default defineConfig({
     integrations: [
       tailwind({
         applyBaseStyles: false,
       }),
     ],
   });

5. Atualize o tsconfig.json para resolver caminhos de importação:

   {
     "compilerOptions": {
       "baseUrl": ".",
       "paths": {
         "@/*": ["./src/*"]
       }
     }
   }

6. Configure o shadcn para gerenciar componentes personalizados:

   npx shadcn@latest init

7. Adicione componentes do shadcn ao seu projeto:

   npx shadcn-ui@latest add

🎉 Pronto!

Agora você pode começar a desenvolver sua aplicação utilizando os recursos avançados das bibliotecas integradas.

Para mais detalhes, consulte as documentações oficiais de cada biblioteca.