O que é Tailwind CSS e como instalar via CDN? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 17 Horas 49 Min 51 Seg Tempo restante da oferta: 17 49 51 [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) O que é Tailwind CSS e como instalar via CDN? [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) # O que é 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. [ Redação Treinaweb ](https://www.treinaweb.com.br/blog/autor/redacao-treinaweb) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/TAILWIND-CSS.jpg) Os frameworks são ferramentas que contém componentes e documentações que ajudam no desenvolvimento de aplicações, e neste artigo, estudemos sobre o Tailwind CSS, que vem se popularizando cada vez mais no desenvolvimento front-end. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## Mas afinal, o que é o Tailwind CSS? Tailwind é um framework CSS que permite há você criar layouts para suas aplicações web utilizando sua estrutura. Ou seja, uma ferramenta que fornece componentes para sua estilização. O propósito geral da criação desse framework é aumentar a velocidade para o desenvolvimento, agilizando os processos de criação de seus web sites. Trazendo classes estilizadas a serem incluídas no CSS, com o uso de `utility-first` que são classes utilitárias que representam atributos CSS, como `width`, `border` e `background`. Para facilitar sua compreensão demostraremos um exemplo de estilização com CSS e depois um com Tailwind onde ele recebe os mesmos estilos de uma forma diferente: Com CSS: ```html .card { padding: 5rem; display: flex; border-radius: 2rem; background-color: cadet-blue; } TreinaWeb ``` Com tailwind: ```html TreinaWeb ``` Como podemos notar houver uma grande diferença no sentido visual do card a ser estilizado, porém, o resultado seria o mesmo em ambas as partes. Onde os efeitos de estilização recebem os seguintes atributos: ![tailwind](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/Name-2.png) Para conhecemos melhor os atributos dessa estrutura, podemos navegar pela biblioteca do [Tailwind CSS](https://tailwindcss.com/docs/padding). Mas caso ainda não seja familiarizado com arquivos como este, não se preocupe, pois, aprenderemos juntos como instalar e criar nosso primeiro projeto. ## Mas, por que utilizá-lo? Analisando as possíveis respostas, podemos avaliar aspectos, em que comparado a outros frameworks, ele permite ao desenvolvedor criar suas próprias classes utilitárias, estilizando cada elemento da sua própria forma. Diferente do Bootstrap que já traz classes predefinidas para seus elementos como tabelas e formulários. [ ![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) ### Criando um Navbar com Tailwind CSS Para iniciamos será necessário criar um arquivo com extensão HTML no VS Code, e adicionar-lhe a seguinte estrutura: ```html TreinaWeb ``` Na estrutura anterior, foi adicionado o link do Tailwind CSS via CDN. Posteriormente no `body` adiciono a classe `bg-cyan-400 ` que seria  o mesmo que `background-color: rgb(34 211 238)`. E, para as demais estilizações sigo o mesmo padrão de estilização, aplicando componentes de CSS do Tailwind, ou seja, suas classes utilitárias. Logo abaixo, mostro algumas classes utilizadas no código anterior: ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/doctable.png) Para demais estudos aconselho a verificação da [documentação](https://tailwindcss.com/docs/background-color), onde você encontrará detalhadamente, a classe correspondente a sua estilização. Em seguida, podemos observar o resultado do código anterior, que executamos: ![tailwind](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/Captura-de-tela-2022-09-15-015230.png) Agora, iremos atribuir novos atributos ao nosso navbar e classes de estilização. ```html TreinaWeb Home Service About Contact Blog ``` Formando o seguinte resultado: ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/tttt.png) Utilizando as classes da documentação do Tailwind CSS, adicionamos com as tags  `ul ` e  `li `, novos efeitos de estilização. Aplicando um `flex` e distribuindo os elementos com `md: justify-between`, que define como o navegador distribui o espaço entre e ao redor dos itens deste conteúdo, ao longo do eixo principal. ## Conclusão Neste artigo, conseguimos entender sobre o que são frameworks, o que é o Tailwind CSS, porque utilizá-lo, e como realizar um primeiro projeto pelo VS Code. Autor ![Redação Treinaweb](//secure.gravatar.com/avatar/662942287935c97e547cfc12c04be6e5?d=mm) ## Redação Treinaweb [Todos os artigos](https://www.treinaweb.com.br/blog/autor/redacao-treinaweb) ## 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/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end 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/2023/02/criando-componentes-tailwindcss-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Criando componentes com Tailwind CSS ](https://www.treinaweb.com.br/blog/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 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/2024/04/sistemas-mensageria-min-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 3 anos atrás ## [ O que é e quais as diferenças entre Kafka, RabbitMQ e AWSSQS ](https://www.treinaweb.com.br/blog/o-que-e-e-quais-as-diferencas-entre-kafka-rabbitmq-e-awssqs) Confira nesse artigo o que são sistemas de mensageria, o que são e quais as diferenças entre Kafka, RabbitMQ e AWSSQS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/12/TS-ZOD-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ O que é o Zod? ](https://www.treinaweb.com.br/blog/o-que-e-o-zod) Neste artigo vamos ter uma introdução sobre o Zod, uma biblioteca de declaração e validação de dados em TypeScript e criar um exemplo de como utilizá-la. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/11/Clean-Architecture-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 3 anos atrás ## [ O que vem a ser a Clean Architecture? ](https://www.treinaweb.com.br/blog/o-que-vem-a-ser-a-clean-architecture) Confira nesse artigo uma introdução do que é a Clean Architecture, quais seus componentes e os benefícios ao utilizar essa arquitetura. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/08/code-review-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 3 anos atrás ## [ O que é code review e quais são os benefícios? ](https://www.treinaweb.com.br/blog/o-que-e-code-review-e-quais-sao-os-beneficios) Confira neste artigo o que vem a ser o code review e quais são os benefícios de colocar isso em prática no seu time. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/closure-400x280.jpg) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 4 anos atrás ## [ O que é Closure ](https://www.treinaweb.com.br/blog/o-que-e-closure) Neste artigo, veremos o que é Closure e por que é tão importante entendê-lo para saber o que acontece por debaixo dos panos na linguagem. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/CSS-JS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ O que é PostCSS e suas funcionalidades ](https://www.treinaweb.com.br/blog/o-que-e-postcss-e-suas-funcionalidades) Neste artigo veremos uma ferramenta que vem auxiliando muito os desenvolvedores durante seus projetos, sendo ela, PostCSS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/BFF-400x280.jpg) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 4 anos atrás ## [ O que é BFF? ](https://www.treinaweb.com.br/blog/o-que-e-bff) Conheça neste artigo o pattern arquitetural BFF (Backend For Frontend). Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/O-QUE-E-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ O que é HTML? ](https://www.treinaweb.com.br/blog/o-que-e-html) No artigo de hoje, será abordado o tema HTML, nele irá conter desde sua história, quem o criou e como deve ser montada sua estrutura. 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 **17h 49min 51s** - 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