https://github.com/aszurar/tailwindcss
O projeto tailwind-app é um projeto focado na aprendizagem e prática do uso do Tailwind CSS Assim, criamos uma interface clone da tela de configurações do Notion.
https://github.com/aszurar/tailwindcss
css css3 html html5 javascript next nextjs radix-ui react reactjs tailwind-variants tailwindcss typescript vercel
Last synced: 3 months ago
JSON representation
O projeto tailwind-app é um projeto focado na aprendizagem e prática do uso do Tailwind CSS Assim, criamos uma interface clone da tela de configurações do Notion.
- Host: GitHub
- URL: https://github.com/aszurar/tailwindcss
- Owner: Aszurar
- Created: 2023-10-12T15:26:18.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-23T14:19:40.000Z (over 2 years ago)
- Last Synced: 2024-01-23T15:36:16.320Z (over 2 years ago)
- Topics: css, css3, html, html5, javascript, next, nextjs, radix-ui, react, reactjs, tailwind-variants, tailwindcss, typescript, vercel
- Language: TypeScript
- Homepage: https://tailwindcss-app.vercel.app
- Size: 370 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# #3 - React: ****
## Masterizando TailwindCSS: Tailwind-app
- O projeto **tailwind-app** é um projeto focado na aprendizagem e prática do uso do **[Tailwind CSS](https://tailwindcss.com/)**. Para isso, criamos um aplicação clone das telas de configuração do **[Notion](https://www.notion.so/)**.
- 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](https://www.npmjs.com/package/@axe-core/react)** para testes e correções de acessibilidade assim como leitor de tela ChromeVox e o uso do **[Radix UI](https://www.radix-ui.com/)** para componentes acessíveis.
- O site foi publicado com CI/CD por meio da plataforma **[Vercel](https://www.vercel.com/)**.
- Acesse em: ****
tailwind-app
https://github.com/Aszurar/tailwindcss/assets/64987824/69b9c2b3-e3c3-43be-b933-ec0815c123fd
[](https://vercel.com/aszurar/tailwindcss-app) [](https://nextjs.org/) [](https://react.dev/) [](https://react.dev/learn/scaling-up-with-reducer-and-context) [](https://tailwindcss.com/) [](https://www.radix-ui.com/) [](https://www.typescriptlang.org/) [](https://www.javascript.com/) [](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [](https://www.w3schools.com/css/) [](https://yarnpkg.com/)
---
**[Vídeo no Youtube](https://www.youtube.com/watch?v=jxYjbeNftTM)**
---
## :information_source: Sobre
- O projeto **tailwind-app** é um clone das tela de configuração do **Notion**.
- A ideia é replicarmos uma interface semelhante aplicando o **[tailwindcss](https://tailwindcss.com/)** 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](https://www.rocketseat.com.br/)**
- Além do tailwind construímos a interface desse projeto foi usado **[React](https://react.dev)** com **[TypeScript](https://www.typescriptlang.org/)**.
- A animação da listagem do Input de arquivos é feita com a lib **[AutoAnimate](https://auto-animate.formkit.com/)**.
**Campos vazios**
---
## :interrobang: Motivo
- 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:
1. Componentes com padrão de Composição com **tailwindcss**;
2. Inputs, Selects, Textarea, com o mesmo padrão de estilo;
3. Botões com variants para todas necessidades;
4. Input de arquivos e imagem totalmente personalizados com preview das imagens e listagem animada com os Cards dos arquivos selecionados
5. Barra lateral e superior de navegação
- **Campos preenchidos**
---
## :art: Design
- O Design do projeto foi fornecido pela **[Rocketseat](https://www.rocketseat.com.br/)** no primeiro módulo do Ignite - React por meio do Figma.
tailwindcss-app
[](https://www.figma.com/file/wyhJEw4TTgVae0NblX9Abl/Ignite-Tailwind-%E2%9C%85?type=design&mode=design&t=vjw5ISwfxYoe6X8q-0)
**Responsividade**
_
_
_
---
## :seedling: Requisitos Mínimos
1. NodeJS
2. React
3. Next
4. Yarn(ou NPM)
- **Light Mode**
_
_
---
## :rocket: Tecnologias Utilizadas
- O projeto foi desenvolvido utilizando as seguintes tecnologias:
1. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**
2. **[AutoAnimate](https://auto-animate.formkit.com/)**
3. **[autoprefixer](https://www.npmjs.com/package/autoprefixer)**
4. **[Date FNS](https://date-fns.org/)**
5. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**
6. **[Lucide React](https://lucide.dev/guide/packages/lucide-react)**
7. **[Next](https://nextjs.org/)**
8. **[NodeJS](https://nodejs.org/en/)**
9. **[Radix UI](https://www.radix-ui.com/)**
10. **[React](https://pt1.br.react.dev/)**
11. **[TailwindCSS](https://tailwindcss.com/)**
12. **[TailwindCSS Variants](https://www.tailwind-variants.org/)**
13. **[TypeScript](https://www.typescriptlang.org/)**
14. **[Vercel](https://www.vercel.com/)**
15. **[Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)**
---
## :truck: Entrega e distribuição continua
****
- Para a publicação da aplicação foi utilizado a plataforma **[Vercel](https://www.vercel.com/)** 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.
---
## :package: Como baixar e executar o projeto
### Baixar
- Clonar o projeto:
```bash
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 do NodeJS](https://nodejs.org/en/)
- [Instalação do Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)
- Instalação das dependências:
- Execute o comando abaixo dentro da pasta do projeto
```bash
yarn
```
### Execução
- Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:
```bash
yarn dev
```
---
Desenvolvido por :star2: Lucas de Lima Martins de Souza.