Criando componentes com Tailwind CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 15 Horas 49 Min 18 Seg Tempo restante da oferta: 15 49 18 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Criando componentes com Tailwind CSS [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Criando componentes com Tailwind CSS Neste artigo veremos por que os componentes nos ajudam durante o desenvolvimento do nosso projeto e como conseguimos criá-los com Tailwind CSS [ Rafael Oliveira ](https://www.treinaweb.com.br/blog/autor/rafael-oliveira) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/criando-componentes-tailwindcss.png) No artigo sobre [Tailwind CSS](http://www.treinaweb.com.br/blog/instalando-tailwind-css-via-npm-e-alterando-suas-propriedades-css-com-theme) vimos como instalar e executar o mesmo na nossa máquina, possibilitando agora aprendermos a criar nossos componentes. Os componentes estão presentes em basicamente todos os sites que acessamos, se tornando algo bem comum, mas como conseguimos realizar a criação de um componente com o Tailwind CSS? Veremos o passo a passo a seguir. ## O que é? Uma vez que criamos um botão e o mesmo passa a se repetir durante o desenvolvimento do nosso site, ele passa a se tornar um componente. Tendo isso em vista, podemos concluir que um componente nada mais é do que algo que irá ser apresentado duas ou mais vezes no nosso projeto. [ ![Bootstrap - Primeiros passos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/bootstrap-5.svg) Curso Bootstrap - Primeiros passos Conhecer o curso ](https://www.treinaweb.com.br/curso/bootstrap-primeiros-passos) Portanto, para facilitarmos o desenvolvimento do nosso projeto, o ideal é criarmos um botão, por exemplo, e aplicar a estilização desejada apenas uma vez, e após isso, basta declararmos no nosso documento `HTML` a classe que este botão possui. ## Criando um componente de botão Em primeiro lugar, vamos criar uma pasta na nossa Área de trabalho e abri-la com o nosso [Visual Studio Code](http://www.treinaweb.com.br/blog/instalacao-do-vs-code-no-windows-linux-e-macos), após isso, realizaremos a instalação do Tailwind CSS seguindo o passo a passo contido no artigo. Logo após instalarmos o Tailwind CSS em nossa máquina, iremos no nosso arquivo `style.css` onde realizamos os `imports` das diretivas do Tailwind CSS, `@tailwind base;` `@tailwind components;` `@tailwind utilities;`. Neste arquivo, iremos declarar o nome da classe que queremos que o nosso botão tenha, e estilizá-la utilizando as classes do Tailwind CSS. Dessa forma: ```css @tailwind base; @tailwind components; @tailwind utilities; .btn-treinaweb { @apply bg-green-400 text-white p-2 m-5 rounded; } ``` ### Explicando o código Visto que, para criarmos um componente, foi necessário utilizarmos a diretiva `@apply`, que será responsável por realizar as aplicações das classes da diretiva `@utilities` do Tailwind CSS. Sendo as classes que declaramos após `@apply`. - bg-green - background-green-400 **(400 equivale a uma tonalidade de cor fornecida pelo Tailwind CSS)** - p-2 - padding-2 **(2 equivale a um espaçamento fornecido pelo Tailwind CSS, sendo sua unidade de medida, rem)** - m-5 - margin-5 **(5 equivale a um espaçamento fornecido pelo Tailwind CSS, sendo sua unidade de medida, rem)** - rounded - border-rounded, arredondamento dos cantos Agora, basta executarmos o comando de build, porém, neste comando devemos passar o caminho do nosso arquivo `CSS` onde declaramos as estilizações do nosso componente, dessa forma: `npx tailwindcss-cli@latest style.css build -o src/css/style.css`. [ ![CSS - Sass](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/sass.svg) Curso CSS - Sass Conhecer o curso ](https://www.treinaweb.com.br/curso/css-sass-avancado) Por fim, aplicamos a classe “btn-treinaweb” no nosso elemento de botão. ```html Componentes Tailwind CSS TreinaWeb ``` Dessa forma, teremos este resultado no nosso navegador: ![Imagem do navegador contendo um botão com o nome de TreinaWeb](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/btn-tw.png) ## Vantagens dos componentes Afinal, quais seriam as vantagens de criarmos um componente? Tendo em vista que, iremos obter o mesmo resultado se declararmos as classes no nosso documento `HTML`. A primeira e principal vantagem é deixarmos o nosso documento `HTML` mais “limpo”, permitindo assim a facilidade da leitura do nosso documento. Vamos comparar dois documentos `HTML`, dentro do documento terão 10 botões, porém, um contendo o nosso componente “btn-treinaweb” em cada botão, e outro, com as mesmas declarações que utilizamos para criarmos o nosso botão, mas com as classes declaradas direto no `HTML`. ```html Componentes Tailwind CSS TreinaWeb botão 1 TreinaWeb botão 2 TreinaWeb botão 3 TreinaWeb botão 4 TreinaWeb botão 5 TreinaWeb botão 6 TreinaWeb botão 7 TreinaWeb botão 8 TreinaWeb botão 9 TreinaWeb botão 10 ``` Agora, vamos comparar o próximo código com este, que irá conter com mesmos 10 botões, porém, com as classes declaradas dentro de `button`. [ ![JavaScript - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-fundamentos) ```html Componentes Tailwind CSS TreinaWeb botão 1 TreinaWeb botão 2 TreinaWeb botão 3 TreinaWeb botão 4 TreinaWeb botão 5 TreinaWeb botão 6 TreinaWeb botão 7 TreinaWeb botão 8 TreinaWeb botão 9 TreinaWeb botão 10 ``` Certamente, nosso primeiro código, que contém o componente “btn-treinaweb”, está visivelmente mais agradável e a leitura do documento fica muito mais fácil, comparado ao segundo. Além disso, a praticidade de aplicarmos apenas uma classe que nomeamos de “btn-treinaweb” e como resultado, já temos o nosso botão estilizado da maneira que queremos, é uma grande vantagem. ## Conclusão Agora que aprendemos a criar nossos componentes, podemos economizar muito tempo durante o desenvolvimento do nosso projeto, com a reutilização de códigos. Não pare por aqui, desenvolva um projeto e aplique seus componentes para que o aprendizado fique fixado em sua mente. Caso queira aprender mais sobre Front-end e sua infinidade de recursos saiba que aqui na [TreinaWeb](http://www.treinaweb.com.br) temos a formação completa, desde [HTML5 e CSS3 até JavaScript](http://www.treinaweb.com.br/formacao/desenvolvedor-front-end) que possui 75h26 de vídeo e um total de 494 exercícios. Veja quais são os cursos abordados durante a formação Front-end: - HTML5 + CSS3 - Básico ao avançado - Google Chrome Develeper Tools - JavaScript - Básico ao avançado - CSS - Sass - UX/UI - Introdução - Acessibilidade - Introdução; Criando interfaces e conteúdos acessíveis; Desenvolvendo sites acessíveis - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #Tecnologia ](https://www.treinaweb.com.br/blog/tag/tecnologia) Autor ![Rafael Oliveira](//secure.gravatar.com/avatar/3dea81057f4d44ce6041d633799ba1a2?d=mm) ## Rafael Oliveira Estudante de programação, atualmente me especializando no Front End. Faço curso de Desenvolvimento de Sistemas na Escola Tecnica Estadual Doutora Ruth Cardoso e o meu principal objetivo é me tornar um Full Stack. Nas horas vagas costumo cozinhar, pois sou apaixonado pela área da culinária. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/rafael-oliveira) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/TAILWIND-CSS-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ O que é Tailwind CSS e como instalar via CDN? ](https://www.treinaweb.com.br/blog/o-que-e-tailwind-css-e-como-instalar-via-cdn) Neste artigo aprenderemos a criar um navbar usando Tailwind CSS, e entender melhor como funciona seus componentes de estilização. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/TAILWIND-NPM-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Instalando Tailwind CSS via NPM e alterando suas propriedades CSS com theme ](https://www.treinaweb.com.br/blog/instalando-tailwind-css-via-npm-e-alterando-suas-propriedades-css-com-theme) Neste artigo, veremos como instalar e utilizar a tecnologia Tailwind CSS via NPM. Também iremos alterar suas propriedades CSS com theme. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/TEMPLATES-GRATUITOS-LANDING-PAGES-400x280.png) [ Marketing Digital ](https://www.treinaweb.com.br/blog/categoria/marketing-digital) 6 anos atrás ## [ Templates gratuitos para Landing Page ](https://www.treinaweb.com.br/blog/templates-gratuitos-para-landing-page) Veja neste artigo templates gratuitos para Landing Page. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/18175820/RAZOR-COMPONENTS-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 8 anos atrás ## [ .NET Core 3.0 - Criando componentes no Razor Components ](https://www.treinaweb.com.br/blog/net-core-3-0-criando-componentes-no-razor-components) Veja neste artigo como é a estrutura de um componente do Razor Componente e aprenda a criar um. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/10/criando-um-bottomnavigationbar-com-flutter-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 6 anos atrás ## [ Criando um BottomNavigationBar com Flutter ](https://www.treinaweb.com.br/blog/criando-um-bottomnavigationbar-com-flutter) Veja neste artigo como criar um BottomNavigationBar com Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/criando-um-drawer-navigator-com-flutter-400x280.png) [ Flutter ](https://www.treinaweb.com.br/blog/categoria/flutter) 6 anos atrás ## [ Criando um drawer navigator com Flutter ](https://www.treinaweb.com.br/blog/criando-um-drawer-navigator-com-flutter) Veja neste artigo como criar um drawer navigator com Flutter. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/05/Criando_componente_snackbar_com_JavaScript_e_CSS-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ Criando componente snackbar com JavaScript e CSS ](https://www.treinaweb.com.br/blog/criando-componente-snackbar-com-javascript-e-css) Nesse artigo, você irá ter o passo a passo de como criar um componente de snackbar do zero. Sendo capaz de adapta-lo como preferir. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/05112250/SPRING-BOOT-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 7 anos atrás ## [ Criando uma API REST com o Spring Boot ](https://www.treinaweb.com.br/blog/criando-uma-api-rest-com-o-spring-boot) Todos os passos da criação de uma API REST com o framework Spring Boot do Java, no Visual Studio Code. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/09/aprender-framework-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 2 anos atrás ## [ Qual é o momento certo para aprender um Framework? ](https://www.treinaweb.com.br/blog/qual-e-o-momento-certo-para-aprender-um-framework) Descubra quando é o momento ideal para aprender um framework e como essa decisão pode impactar sua carreira como desenvolvedor. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155108/React-Hooks-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ React: Conheça o Poder dos Hooks ](https://www.treinaweb.com.br/blog/react-conheca-o-poder-dos-hooks) Conheça o que os React Hooks podem fazer e como eles vão facilitar o processo de desenvolvimento da sua próxima aplicação. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/11153116/symfony-projeto-e-crud-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Iniciando com Symfony: Como criar o projeto e seu primeiro CRUD ](https://www.treinaweb.com.br/blog/iniciando-com-symfony-como-criar-o-projeto-e-seu-primeiro-crud) Nesse artigo veremos como criar o primeiro projeto no Symfony. Falaremos sobre qual tipo de estrutura escolher dependendo da aplicação e como criar o primeiro CRUD utilizando o comando make. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **15h 49min 18s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58