{"id":1198,"date":"2024-07-30T22:30:00","date_gmt":"2024-07-31T01:30:00","guid":{"rendered":"https:\/\/kangaroo.host\/blog\/conheca-o-tailwind-css\/"},"modified":"2024-11-01T23:08:41","modified_gmt":"2024-11-02T02:08:41","slug":"conheca-o-tailwind-css","status":"publish","type":"post","link":"https:\/\/kangaroo.host\/blog\/conheca-o-tailwind-css\/","title":{"rendered":"Conhe\u00e7a o Tailwind CSS"},"content":{"rendered":"\n

E a\u00ed, Kangaroozito! Conhecer novos frameworks e tecnologias \u00e9 sempre algo n\u00e3o s\u00f3 interessante, como tamb\u00e9m importantes para pensarmos em melhorias e projetos futuros. Por isso, falaremos um pouco do Tailwind<\/a>, um framework de CSS que tem tido cada vez mais popularidade e ado\u00e7\u00e3o pelos desenvolvedores, em uma longa disputa com o Bootstrap.<\/p>\n\n\n\n

Sum\u00e1rio<\/h3>\n\n\n\n
    \n
  1. O que \u00e9<\/li>\n\n\n\n
  2. Por que \u00e9 \u00fatil?<\/li>\n\n\n\n
  3. Exemplos<\/li>\n\n\n\n
  4. Como implementar<\/li>\n\n\n\n
  5. Conclus\u00e3o<\/li>\n<\/ol>\n\n\n\n

    O que \u00e9 Tailwind CSS?<\/h2>\n\n\n\n
    \"Site
    Reprodu\u00e7\u00e3o: Site oficial Tailwind CSS<\/figcaption><\/figure>\n\n\n\n

    O Tailwind \u00e9 um framework de CSS, ou seja, ele ajuda a implementar uma s\u00e9rie de recursos pr\u00e9-moldados que ajudam em diversas \u00e1reas do desenvolvimento front-end, tanto em ganho de produtividade ao permitir uma estiliza\u00e7\u00e3o mais r\u00e1pida, quanto em permitir visuais muito mais agrad\u00e1veis e impactantes para seus visitantes.<\/p>\n\n\n\n

    A grande facilidade desse framework \u00e9 que ele traz a estiliza\u00e7\u00e3o feita atrav\u00e9s de classes incorporadas no HTML, ou seja, voc\u00ea adiciona algumas classes espec\u00edficas em seus elementos HTML, e o Tailwind atribuir\u00e1 a partir dos moldes a apar\u00eancia desse elemento, fazendo com que essas classes acabem funcionando como uma API para evocar as estiliza\u00e7\u00f5es.<\/p>\n\n\n\n

    Por que \u00e9 \u00fatil?<\/h2>\n\n\n\n

    O Tailwind \u00e9 extremamente \u00fatil por permitir que voc\u00ea n\u00e3o precise se preocupar tanto em estilizar “na unha” cada um dos elementos, j\u00e1 que o framework trar\u00e1 diversas classes com visuais muito legais, e assim voc\u00ea pode refinar o visual final manipulando essas classes.<\/p>\n\n\n\n

    Outro fator muito importante de se destacar \u00e9 a simplicidade em que ele permite implementar a responsividade para diferentes tamanhos de tela, o que \u00e9 tradicionalmente algo que alguns desenvolvedores acabam tendo maior dor de cabe\u00e7a para corrigir, e que nesse caso pode ser ajustado com apenas algumas poucas classes, agilizando muito do tempo de desenvolvimento.<\/p>\n\n\n\n

    Al\u00e9m disso, ele tamb\u00e9m \u00e9 muito presente em projetos que usam frameworks JavaScript, como React e Vue, por muitas vezes sendo utilizado em conjunto. Uma grande vantagem de usar o Tailwind nesses frameworks \u00e9 a possibilidade de cria\u00e7\u00e3o do seu CSS pr\u00f3prio.<\/p>\n\n\n\n

    Como implementar<\/h2>\n\n\n\n

    O Tailwind pode ser implementado de algumas formas: como atrav\u00e9s de CDN (importando o CSS remoto do framework), atrav\u00e9s de CLIs e como uma depend\u00eancia do projeto. <\/p>\n\n\n\n

    A grande vantagem de us\u00e1-lo atrav\u00e9s de CLI \u00e9 caso mencionado no t\u00f3pico anterior, onde \u00e9 poss\u00edvel criar um CSS pr\u00f3prio, que ter\u00e1 apenas os recursos que o seu projeto realmente est\u00e1 usando, o que pode ajudar a diminuir significativamente o tamanho final dos seus arquivos CSS, poupando recursos e salvando tempo de carregamento final de seu site.<\/p>\n\n\n\n

    Para o uso atrav\u00e9s de CDN, basta adicionar o seguinte script de importa\u00e7\u00e3o dentro das tags <head> de seu HTML:<\/p>\n\n\n\n

    <\/circle><\/circle><\/circle><\/g><\/svg><\/span>
    <!doctype<\/span> <\/span>html<\/span>><\/span><\/span>\n<html><\/span><\/span>\n<head><\/span><\/span>\n  <\/span><meta<\/span> <\/span>charset<\/span>=<\/span>"<\/span>UTF-8<\/span>"<\/span>><\/span><\/span>\n  <\/span><meta<\/span> <\/span>name<\/span>=<\/span>"<\/span>viewport<\/span>"<\/span> <\/span>content<\/span>=<\/span>"<\/span>width=device-width, initial-scale=1.0<\/span>"<\/span>><\/span><\/span>\n  <\/span><script<\/span> <\/span>src<\/span>=<\/span>"<\/span>https:\/\/cdn.tailwindcss.com<\/span>"<\/span>><\/script><\/span><\/span>\n<\/head><\/span><\/span>\n<body><\/span><\/span>\n  <\/span><h1<\/span> <\/span>class<\/span>=<\/span>"<\/span>text-3xl font-bold underline<\/span>"<\/span>><\/span><\/span>\n    Hello world!<\/span><\/span>\n  <\/span><\/h1><\/span><\/span>\n<\/body><\/span><\/span>\n<\/html><\/span><\/span><\/code><\/pre>HTML<\/span><\/div>\n\n\n\n
    J\u00e1 para o caso de utiliza\u00e7\u00e3o atrav\u00e9s de CLI, \u00e9 poss\u00edvel instal\u00e1-lo de forma f\u00e1cil atrav\u00e9s do NodeJS com os seguintes comandos:<\/p>\n\n\n\n
    <\/circle><\/circle><\/circle><\/g><\/svg><\/span>