Masterizando o Tailwind - Curso complementar

🎲 O curso

O curso "Masterizando o Tailwind" tem o objetivo de aprofundar os conhecimentos da biblioteca de estilos Tailwind. A ideia é implementar somente a casca de um projeto de um dashboard, visualizando a vasta atuação da biblioteca em diferentes tipos de problemas.

O curso foi realizado em 12/2023.

💻 O Projeto

Trata-se da implementação de um dashboard com sidebar, abas e um formulário. Nenhuma funcionalidade em si foi implementada de fato, somente a parte de estrutura e CSS, pois o foco é aprimorar os conceitos da biblioteca. No projeto abordou-se

• Configuração e personalização de temas
• Utilização de variantes com CSS para alguns componentes
• Uso de componentes de outras bibliotecas sendo customizados de acordo com o interesse
• Criação de animações
• Responsividade
• Light/Dark mode

💡 Tecnologias Utilizadas

No projeto utilizou-se:

• NextJS -> Framework React para implementação de interfaces
• Typescript -> Linguagem de programação fortemente tipada
• FormKit/Auto Animate -> Biblioteca para criação de animações.
• Framer Motion -> Biblioteca para criação de animações.
• Lucide React -> Biblioteca de ícones.
• Radix UI/React Collapsible -> Biblioteca de componentes prontos, no qual já se preocupa com a acessibilidade. No caso, utilizou-se o Collapsible.
• Radix UI/React Scroll Area -> Biblioteca de componentes prontos, no qual já se preocupa com a acessibilidade. No caso, utilizou-se o Scroll Area.
• Radix UI/React Select -> Biblioteca de componentes prontos, no qual já se preocupa com a acessibilidade. No caso, utilizou-se o Select.
• Radix UI/React Tabs -> Biblioteca de componentes prontos, no qual já se preocupa com a acessibilidade. No caso, utilizou-se as Tabs.
• Tailwind Merge -> Biblioteca auxiliar do Tailwind que ajuda na escrita de classes muito longas.
• Tailwind Variants -> Biblioteca para realizar criação de variantes de um componentes, em conjunto com o Tailwind.

🔎 Referências

• Node Js
• Typescript
• FormKit/Auto Animate
• Framer Motion
• Lucide React
• Radix UI
• Tailwind Merge
• Tailwind Variants

🧠 Créditos e Agradecimentos

Gostaria de agradecer a Rocketseat pelo conteúdo fantástico disponibilizado, sendo todos os créditos do projeto destinados a eles.