#3 - React: https://tailwindcss-app.vercel.app/
-
O projeto tailwind-app é um projeto focado na aprendizagem e prática do uso do Tailwind CSS. Para isso, criamos um aplicação clone das telas de configuração do Notion.
-
O propósito aqui é aprender e praticar a estilização via TailwindCSS em conjunto com Radix UI, criando componentes totalmente personalizáveis, responsivos com versão mobile, com troca entre light/dark mode no contexto do React com TypeScript.
-
A acessibilidade também foi levada em consideração, com o uso da lib axe-core para testes e correções de acessibilidade assim como leitor de tela ChromeVox e o uso do Radix UI para componentes acessíveis.
-
O site foi publicado com CI/CD por meio da plataforma Vercel.
-
Acesse em: https://tailwindcss-app.vercel.app
TailwindCSS-app.mov
Sobre | Motivo | Design | Requisitos | Tecnologias | CI/CD | Baixar e Executar
-
O projeto tailwind-app é um clone das tela de configuração do Notion.
-
A ideia é replicarmos uma interface semelhante aplicando o tailwindcss e suas funcionalidades, desde o básico ao avançado.
-
Além disso usamos bibliotecas que auxiliam na estilização com tailwindcss como tailwind-variants para criarmos variações dos componentes.
-
É o projeto do mini-curso Masterizando TailwindCSS da Rocketseat
-
Além do tailwind construímos a interface desse projeto foi usado React com TypeScript.
-
A animação da listagem do Input de arquivos é feita com a lib AutoAnimate.
Campos vazios
-
Esse projeto tem o objetivo ensinar e praticar o uso do tailwindcss assim como outras ferramentas que podem auxiliar no desenvolvimento com essa tecnologia.
- Entender e praticar construção de interfaces com tailwindcss;
- Responsividade, breakpoints e variações de componentes com tailwindcss-variants e tailwindcss;
- Componentes, componentização e suas propriedades em conjunto com tailwindcss-variants
- Animações com AutoAnimate;
- Componentes acessíveis com Radix UI;
- Mostrar a simples integração do Radix UI com tailwindcss;
- Dark mode de forma simples com tailwindcss;
- Customização do tema global do tailwindcss construindo novos valores para propriedades, cores e novas classes.
- Boas práticas de acessibilidade com axe-core;
-
É um projeto simples, mas que aborda conceitos importantes para o desenvolvimento de interfaces com tailwindcss.
-
Construímos:
- Componentes com padrão de Composição com tailwindcss;
- Inputs, Selects, Textarea, com o mesmo padrão de estilo;
- Botões com variants para todas necessidades;
- Input de arquivos e imagem totalmente personalizados com preview das imagens e listagem animada com os Cards dos arquivos selecionados
- Barra lateral e superior de navegação
-
Campos preenchidos
- O Design do projeto foi fornecido pela Rocketseat no primeiro módulo do Ignite - React por meio do Figma.
Responsividade
_
_
_
- NodeJS
- React
- Next
- Yarn(ou NPM)
-
Light Mode
_
_
-
O projeto foi desenvolvido utilizando as seguintes tecnologias:
https://tailwindcss-app.vercel.app/
- Para a publicação da aplicação foi utilizado a plataforma Vercel onde é possível publicar de forma rápida, fácil e simples projetos React que estão hospedados no GitHub, GitLab, dentre outras plataformas de repositório remoto de graça.
- Com isso, o CI/CD já é aplicado automaticamente por meio dessa plataforma definindo a branch de produção, sempre que houver uma atualização nela, será gerado uma nova versão do projeto e já publicado.
- Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.
-
Clonar o projeto:
git clone https://github.com/Aszurar/tailwindcss
-
É necessário ter o Node.js e um gerenciador de pacotes, como o Yarn, instalados em seu sistema. Se você ainda não os tem, siga estas instruções:
-
Instalação das dependências:
-
Execute o comando abaixo dentro da pasta do projeto
yarn
-
-
Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:
yarn dev
Desenvolvido por 🌟 Lucas de Lima Martins de Souza.