Esse projeto é um aprendizado de TailwindCSS de forma mais avançada usando variantes, alto nível de componentização e algumas libs que ajudam na escalabilidade com Tailwind.
![](https://private-user-images.githubusercontent.com/71537090/270661643-1a76d760-d66a-4ee1-b6bb-653878a361fe.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjA2MDExNjMsIm5iZiI6MTcyMDYwMDg2MywicGF0aCI6Ii83MTUzNzA5MC8yNzA2NjE2NDMtMWE3NmQ3NjAtZDY2YS00ZWUxLWI2YmItNjUzODc4YTM2MWZlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzEwVDA4NDEwM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTcyNjc0NThlNDVmYzJlZDRlZjA3OTJlYzNjYzdmMWNmNjMyZDJlNDNlYTNiMmMwMjhhMTUxMWUzNDVlN2UyODYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.lWL5lykW4-2nTW_S5_qTML_1kyTu-aFQwrRVjm3u49Y)
Esse projeto é uma forma de masterizar meus conhecimentos em TailwindCSS construindo uma página de formulário administrativo onde tem-se abas no corpo da página, um menu lateral e vários componentes de texto, upload de arquivo e até editores para escrita da biografia do usuário.
Além disso, foi desenvolvida a funcionalidade de Dark Mode usando o próprio tailwindCSS e trabalhada a parte de responsividade onde foi adaptado o layout para mobile e desktop.
Uma das grandes novidades foi o uso de variantes usando a biblioteca Tailwind Variants que possibilita criar versões diferentes do seus componentes.
- NextJS: Usado por algumas das maiores empresas do mundo, Next.js permite que você crie aplicativos Web full-stack , estendendo os recursos mais recentes do React e integrando poderosas ferramentas JavaScript baseadas em Rust para compilações mais rápidas.
- Tailwind: Uma estrutura CSS utilitária repleta de classes, e que pode ser composta para construir qualquer design, diretamente em sua marcação.
- Tailwind Variants: O poder do Tailwind combinado com uma API variante de primeira classe.
- Tailwind Merg: Função utilitária para mesclar com eficiência classes CSS do Tailwind em JS sem conflitos de estilo.
- Radix UI Primitives: Primitivos React sem estilo, acessíveis e de código aberto para aplicativos da web e sistemas de design de alta qualidade.
Você vai me encontrar em qualquer uma das redes sociais abaixo: