{"id":23178876,"url":"https://github.com/aszurar/tailwindcss","last_synced_at":"2026-04-11T10:32:51.516Z","repository":{"id":199930779,"uuid":"704123168","full_name":"Aszurar/tailwindcss","owner":"Aszurar","description":"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.","archived":false,"fork":false,"pushed_at":"2024-01-23T14:19:40.000Z","size":379,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-01-23T15:36:16.320Z","etag":null,"topics":["css","css3","html","html5","javascript","next","nextjs","radix-ui","react","reactjs","tailwind-variants","tailwindcss","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://tailwindcss-app.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Aszurar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-10-12T15:26:18.000Z","updated_at":"2024-04-14T18:34:07.307Z","dependencies_parsed_at":"2024-01-23T15:52:47.900Z","dependency_job_id":null,"html_url":"https://github.com/Aszurar/tailwindcss","commit_stats":null,"previous_names":["aszurar/tailwindcss"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Aszurar/tailwindcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Ftailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Ftailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Ftailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Ftailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Aszurar","download_url":"https://codeload.github.com/Aszurar/tailwindcss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Aszurar%2Ftailwindcss/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260475938,"owners_count":23014943,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","html","html5","javascript","next","nextjs","radix-ui","react","reactjs","tailwind-variants","tailwindcss","typescript","vercel"],"created_at":"2024-12-18T07:13:02.553Z","updated_at":"2025-12-30T19:57:21.730Z","avatar_url":"https://github.com/Aszurar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# #3 - React: **\u003chttps://tailwindcss-app.vercel.app/\u003e**\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://i.imgur.com/cfqWPQ9.png\" width=\"1000\"\u003e\n\u003c/div\u003e\n\n## Masterizando TailwindCSS: Tailwind-app\n\n- 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/)**.\n- 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**.\n  \n- 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.\n- O site foi publicado com CI/CD por meio da plataforma **[Vercel](https://www.vercel.com/)**.\n- Acesse em: **\u003chttps://tailwindcss-app.vercel.app\u003e**\n\n  \u003cdiv align=\"center\"\u003e\n    \u003ch3\u003e\u003ca href=\"https://tailwindcss-app.vercel.app\"\u003etailwind-app\u003c/a\u003e\u003c/h3\u003e\n\n\n\n    https://github.com/Aszurar/tailwindcss/assets/64987824/69b9c2b3-e3c3-43be-b933-ec0815c123fd\n\n\n\n  \u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![GitHub deployments](https://img.shields.io/github/deployments/Aszurar/tailwindcss/production?logo=vercel\u0026logoColor=white\u0026label=Vercel\u0026labelColor=black)](https://vercel.com/aszurar/tailwindcss-app) [![Next](https://img.shields.io/badge/-Next-black.svg?style=flat\u0026logo=next.js\u0026logoColor=white\u0026link=https://nextjs.org/)](https://nextjs.org/)  [![React](https://img.shields.io/badge/-React-%2320232a.svg?style=flat\u0026logo=react\u0026link=https://react.dev)](https://react.dev/)  [![Context-API](https://img.shields.io/badge/Context--Api-000000?style=flat\u0026logo=react)](https://react.dev/learn/scaling-up-with-reducer-and-context)  [![TailwindCSS](https://img.shields.io/badge/Tailwindcss-%2338B2AC.svg?style=flat\u0026logo=tailwind-css\u0026logoColor=white\u0026link=https://tailwindcss.com/)](https://tailwindcss.com/) [![Radix UI](https://img.shields.io/badge/Radix%20UI-161618.svg?style=flat\u0026logo=radix-ui\u0026logoColor=white)](https://www.radix-ui.com/)   [![TypeScript](https://img.shields.io/badge/-TypeScript-%23007ACC?style=?style=flat-square\u0026logo=typescript\u0026logoColor=white\u0026link=https://www.typescriptlang.org/)](https://www.typescriptlang.org/) [![JavaScript](https://img.shields.io/badge/-JavaScript-%23323330.svg?style=flat\u0026logo=javascript\u0026link=https://www.javascript.com/)](https://www.javascript.com/) [![HTML5](https://img.shields.io/badge/-HTML5-E34F26?style=flat\u0026logo=html5\u0026logoColor=white\u0026link=https://developer.mozilla.org/pt-BR/docs/Web/HTML)](https://developer.mozilla.org/pt-BR/docs/Web/HTML) [![CSS3](https://img.shields.io/badge/-CSS3-1572B6?style=flat\u0026logo=css3\u0026link=https://www.w3schools.com/css/)](https://www.w3schools.com/css/) [![Yarn](https://img.shields.io/badge/-yarn-%232C8EBB?style=flat\u0026logo=yarn\u0026logoColor=white\u0026link=https://yarnpkg.com/)](https://yarnpkg.com/)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n        \u003ch2\u003e\n          \u003ca href=\"#information_source-sobre\"\u003eSobre\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#interrobang-motivo\"\u003eMotivo\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#art-design\"\u003eDesign\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#seedling-requisitos-mínimos\"\u003eRequisitos\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#rocket-tecnologias-utilizadas\"\u003eTecnologias\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca\n          href=\"#truck-entrega-e-distribuição-continua\"\u003eCI/CD\u003c/a\u003e\u0026nbsp;|\u0026nbsp;\n          \u003ca href=\"#package-como-baixar-e-executar-o-projeto\"\u003eBaixar e Executar\u003c/a\u003e\u0026nbsp;\n        \u003c/h2\u003e\n\u003c/div\u003e\n\n---\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://i.imgur.com/9eV9o8d.gif\" width=\"400\"\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\" \u003e\n\n**[Vídeo no Youtube](https://www.youtube.com/watch?v=jxYjbeNftTM)**\n\n\u003c/div\u003e\n\n---\n\n## :information_source: Sobre\n\n- O projeto **tailwind-app** é um clone das tela de configuração do **Notion**.\n- A ideia é replicarmos uma interface semelhante aplicando o **[tailwindcss](https://tailwindcss.com/)** e suas funcionalidades, desde o básico ao avançado.\n- Além disso usamos bibliotecas que auxiliam na estilização com tailwindcss como tailwind-variants para criarmos variações dos componentes.\n- É o projeto do mini-curso **Masterizando TailwindCSS** da **[Rocketseat](https://www.rocketseat.com.br/)**\n- Além do tailwind construímos a interface desse projeto foi usado **[React](https://react.dev)** com **[TypeScript](https://www.typescriptlang.org/)**.\n- A animação da listagem do Input de arquivos é feita com a lib **[AutoAnimate](https://auto-animate.formkit.com/)**.\n  \n  **Campos vazios**\n\n\u003cdiv align=\"center\" \u003e\n      \u003cimg src=\"https://i.imgur.com/tJtriBr.png\" width=\"700\" alt=\"Tela inicial\"\u003e\n      \u003cimg src=\"https://i.imgur.com/IkIdHqU.png\" width=\"700\" alt=\"Tela inicial\"\u003e\n\u003c/div\u003e\n\n---\n\n## :interrobang: Motivo\n\n- Esse projeto tem o objetivo ensinar e praticar o uso do **tailwindcss** assim como outras ferramentas que podem auxiliar no desenvolvimento com essa tecnologia.\n  - Entender e praticar construção de interfaces com **tailwindcss**;\n  - Responsividade, breakpoints e variações de componentes com **tailwindcss-variants** e **tailwindcss**;\n  - Componentes, componentização e suas propriedades em conjunto com **tailwindcss-variants**\n  - Animações com **AutoAnimate**;\n  - Componentes acessíveis com **Radix UI**;\n  - Mostrar a simples integração do **Radix UI** com **tailwindcss**;\n  - Dark mode de forma simples com **tailwindcss**;\n  - Customização do tema global do **tailwindcss** construindo novos valores para propriedades, cores e novas classes.\n  - Boas práticas de acessibilidade com **axe-core**;\n\n- É um projeto simples, mas que aborda conceitos importantes para o desenvolvimento de interfaces com **tailwindcss**.\n- Construímos:\n  1. Componentes com padrão de Composição com **tailwindcss**;\n  2. Inputs, Selects, Textarea, com o mesmo padrão de estilo;\n  3. Botões com variants para todas necessidades;\n  4. Input de arquivos e imagem totalmente personalizados com preview das imagens e listagem animada com os Cards dos arquivos selecionados\n  5. Barra lateral e superior de navegação\n\n- **Campos preenchidos**\n\n  \u003cdiv align=\"center\" \u003e\n      \u003cimg src=\"https://i.imgur.com/HruxUNV.png\" width=\"700\"\u003e\n      \u003cimg src=\"https://i.imgur.com/b6jFwrz.png\" width=\"700\"\u003e\n  \u003c/div\u003e\n\n---\n\n## :art: Design\n\n- O Design do projeto foi fornecido pela **[Rocketseat](https://www.rocketseat.com.br/)** no primeiro módulo do Ignite - React por meio do Figma.\n\n\u003cdiv align=\"center\"\u003e\n  \u003ch3\u003e\u003ca href=\"https://www.figma.com/file/wyhJEw4TTgVae0NblX9Abl/Ignite-Tailwind-%E2%9C%85?type=design\u0026mode=design\u0026t=vjw5ISwfxYoe6X8q-0\"\u003etailwindcss-app\u003c/a\u003e\u003c/h3\u003e\n\n  [![Design](https://i.imgur.com/27ZuoQn.png)](https://www.figma.com/file/wyhJEw4TTgVae0NblX9Abl/Ignite-Tailwind-%E2%9C%85?type=design\u0026mode=design\u0026t=vjw5ISwfxYoe6X8q-0)\n\u003c/div\u003e\n\n**Responsividade**\n\n\u003cdiv align=\"center\" \u003e\n      \u003cimg src=\"https://i.imgur.com/Id4w6in.png\" height=\"425\"\u003e_\u003cimg src=\"https://i.imgur.com/7bwpEB5.png\" height=\"425\"\u003e_\u003cimg src=\"https://i.imgur.com/W2vkjUj.png\" height=\"425\"\u003e\n      \u003cimg src=\"https://i.imgur.com/Id4w6in.png\" height=\"425\"\u003e_\u003cimg src=\"https://i.imgur.com/OjAUkAy.png\" height=\"425\"\u003e\n\u003c/div\u003e\n\n---\n\n## :seedling: Requisitos Mínimos\n\n  1. NodeJS\n  2. React\n  3. Next\n  4. Yarn(ou NPM)\n  \n- **Light Mode**\n\n  \u003cdiv align=\"center\" \u003e\n      \u003cimg src=\"https://i.imgur.com/IbHRQwd.png\" width=\"700\"\u003e\n      \u003cimg src=\"https://i.imgur.com/1PcsdOQ.png\" width=\"700\"\u003e\n      \u003cimg src=\"https://i.imgur.com/lINPjo9.png\" height=\"425\"\u003e_\u003cimg src=\"https://i.imgur.com/CP21LjY.png\" height=\"425\"\u003e_\u003cimg src=\"https://i.imgur.com/xaKbvRQ.png\" height=\"425\"\u003e\n  \u003c/div\u003e\n\n---\n\n## :rocket: Tecnologias Utilizadas\n\n- O projeto foi desenvolvido utilizando as seguintes tecnologias:\n\n  1. **[axe-core/react](https://www.npmjs.com/package/@axe-core/react)**\n  2. **[AutoAnimate](https://auto-animate.formkit.com/)**\n  3. **[autoprefixer](https://www.npmjs.com/package/autoprefixer)**\n  4. **[Date FNS](https://date-fns.org/)**\n  5. **[JavaScript](https://developer.mozilla.org/pt1.BR/docs/Web/JavaScript)**\n  6. **[Lucide React](https://lucide.dev/guide/packages/lucide-react)**\n  7. **[Next](https://nextjs.org/)**\n  8. **[NodeJS](https://nodejs.org/en/)**\n  9. **[Radix UI](https://www.radix-ui.com/)**\n  10. **[React](https://pt1.br.react.dev/)**\n  11. **[TailwindCSS](https://tailwindcss.com/)**\n  12. **[TailwindCSS Variants](https://www.tailwind-variants.org/)**\n  13. **[TypeScript](https://www.typescriptlang.org/)**\n  14. **[Vercel](https://www.vercel.com/)**\n  15. **[Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)**\n\n---\n\n## :truck: Entrega e distribuição continua\n\n**\u003chttps://tailwindcss-app.vercel.app/\u003e**\n\n- 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.\n- 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.\n- Além disso, podemos customizar o próprio endereço do site, adicionar ferramentas dentre outras funcionalidades facilmente.\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://i.imgur.com/8KofEH3.png\" width=\"1000\"\u003e\n\u003c/div\u003e\n\n---\n\n## :package: Como baixar e executar o projeto\n\n### Baixar\n\n- Clonar o projeto:\n\n  ```bash\n   git clone https://github.com/Aszurar/tailwindcss\n  ```\n\n- É 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:\n  - [Instalação do NodeJS](https://nodejs.org/en/)\n  - [Instalação do Yarn](https://classic.yarnpkg.com/blog/2017/05/12/introducing-yarn/)\n\n- Instalação das dependências:\n  - Execute o comando abaixo dentro da pasta do projeto\n\n    ```bash\n      yarn\n    ```\n\n### Execução\n\n- Caso tudo tenha sido instalado com sucesso, basta executar na raiz do projeto:\n\n  ```bash\n    yarn dev\n  ```\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\nDesenvolvido por :star2: Lucas de Lima Martins de Souza.\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faszurar%2Ftailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faszurar%2Ftailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faszurar%2Ftailwindcss/lists"}