Confira nosso guia em v\u00eddeo sobre como usar o Tailwind CSS para criar sites<\/a>:<\/strong><\/p>\n Tailwind CSS \u00e9 um framework CSS (Cascading Style Sheets)<\/a> com classes predefinidas que voc\u00ea pode usar para construir e projetar p\u00e1ginas web diretamente na sua marca\u00e7\u00e3o. Ele permite que voc\u00ea escreva CSS em seu HTML na forma de classes pr\u00e9-definidas.<\/p>\n N\u00f3s definiremos o que \u00e9 um framework e o que queremos dizer com “utility-first CSS” para ajud\u00e1-lo a entender melhor do que se trata o Tailwind CSS.<\/p>\n Como um termo de programa\u00e7\u00e3o geral, um framework<\/a> \u00e9 uma ferramenta que fornece componentes reutiliz\u00e1veis e prontos para uso constru\u00eddos a partir das caracter\u00edsticas de uma ferramenta j\u00e1 existente. O prop\u00f3sito geral da cria\u00e7\u00e3o de frameworks \u00e9 aumentar a velocidade de desenvolvimento, fazendo menos trabalho.<\/p>\n Agora que n\u00f3s estabelecemos o significado de um framework, ela deve ajud\u00e1-lo a entender que o Tailwind CSS \u00e9 uma ferramenta constru\u00edda sobre as caracter\u00edsticas de CSS. Todas as funcionalidades do framework foram derivadas de estilos CSS compostos como classes.<\/p>\n Quando dizemos Utility-First CSS, nos referimos a classes em nosso markup (HTML)<\/a>\u00a0com funcionalidades pr\u00e9-definidas. Isto implica que voc\u00ea s\u00f3 tem que escrever uma classe com estilos pr\u00e9-definidos ligados a ela, e esses estilos ser\u00e3o aplicados ao elemento.<\/p>\n Em um caso em que voc\u00ea esteja trabalhando com Vanilla CSS (CSS sem qualquer framework ou biblioteca), voc\u00ea primeiro daria um nome de classe ao seu elemento e depois anexaria diferentes propriedades e valores a essa classe, que, por sua vez, aplicariam o estilo ao seu elemento.<\/p>\n N\u00f3s lhe mostraremos um exemplo. Aqui, vamos criar um bot\u00e3o com cantos arredondados e um texto que diz “Click me” Este \u00e9 o aspecto do bot\u00e3o:<\/p>\n Primeiro vamos fazer isso usando o Vanilla CSS\u00a0e depois usando as classes de utilidades dispon\u00edveis no CSS Tailwind.<\/p>\n N\u00f3s demos etiquetas de bot\u00e3o \u00e0 classe Tudo isso \u00e9 necess\u00e1rio para alcan\u00e7ar o mesmo efeito que o exemplo com o Vanilla CSS. Nenhuma folha de estilos externa onde voc\u00ea tem que escrever os estilos foi criada porque cada nome de classe que usamos j\u00e1 tem um estilo pr\u00e9-definido.<\/p>\n Antes de usar o Tailwind CSS, h\u00e1 alguns pr\u00e9-requisitos que voc\u00ea deve considerar a reuni\u00e3o para usar as caracter\u00edsticas da estrutura sem dificuldades. Aqui est\u00e3o alguns deles:<\/p>\n Voc\u00ea pode usar o Tailwind CSS em projetos web frontend, incluindo frameworks JavaScript como React.js<\/a>, Next.js<\/a>, Laravel<\/a>, Vite, Gatsby, etc.<\/p>\n Aqui est\u00e3o algumas das vantagens de usar o Tailwind CSS:<\/p>\n Algumas das desvantagens de usar o Tailwind CSS incluem:<\/p>\n O CSS \u00e9 melhor usado para acelerar o processo de desenvolvimento escrevendo menos c\u00f3digo. Ele vem com um sistema de design que ajuda a manter a consist\u00eancia atrav\u00e9s de v\u00e1rios requisitos de design como preenchimento, espa\u00e7amento, e assim por diante; com isso, voc\u00ea n\u00e3o precisa se preocupar em criar seus sistemas de design.<\/p>\n Voc\u00ea tamb\u00e9m pode usar o Tailwind CSS se voc\u00ea estiver procurando usar um framework que seja facilmente configur\u00e1vel porque ele n\u00e3o for\u00e7a voc\u00ea a usar componentes (barras de navega\u00e7\u00e3o, bot\u00f5es, formul\u00e1rios<\/a>, etc.) da mesma forma o tempo todo; voc\u00ea pode escolher como seus componentes devem se parecer. Mas voc\u00ea nunca deve usar o Tailwind se voc\u00ea n\u00e3o tiver aprendido e praticado CSS.<\/p>\n Aqui est\u00e3o algumas semelhan\u00e7as:<\/p>\n Agora vamos olhar para algumas das diferen\u00e7as:<\/p>\n Antes de instalar o Tailwind CSS e integr\u00e1-lo em seu projeto, certifique-se disso:<\/p>\n Esta \u00e9 a apar\u00eancia da nossa estrutura de projeto no momento:<\/p>\n Em seguida, inicie um terminal para o seu projeto e execute os seguintes comandos:<\/p>\n O comando acima instalar\u00e1 o framework Tailwind CSS como uma depend\u00eancia. Em seguida, gere seu arquivo tailwind.config.js executando o comando abaixo:<\/p>\n O arquivo tailwind.config.js estar\u00e1 vazio quando criado, ent\u00e3o n\u00f3s temos que adicionar algumas linhas de c\u00f3digo:<\/p>\n Os caminhos de arquivo fornecidos na matriz de conte\u00fado permitir\u00e3o que o Tailwind purgue\/remova qualquer estilo n\u00e3o utilizado durante o tempo de constru\u00e7\u00e3o.<\/p>\n A pr\u00f3xima coisa a fazer \u00e9 adicionar as diretrizes “@tailwind” ao seu arquivo CSS na pasta src<\/strong> – aqui \u00e9 onde Tailwind gera todos os seus estilos de utilidade pr\u00e9-definidos para voc\u00ea:<\/p>\n A \u00faltima coisa a fazer \u00e9 iniciar o processo de constru\u00e7\u00e3o executando este comando no seu terminal:<\/p>\n No c\u00f3digo acima, estamos dizendo ao Tailwind que nosso arquivo de entrada \u00e9 a folha de estilo na pasta src e que qualquer estilo que n\u00f3s usamos tem que ser constru\u00eddo no arquivo de sa\u00edda na pasta p\u00fablica. Agora que instalamos e montamos o Tailwind CSS para nosso projeto, vamos ver alguns exemplos para entender completamente sua aplica\u00e7\u00e3o.<\/p>\n Para usar flex<\/a> no Tailwind CSS, voc\u00ea precisa adicionar uma classe de flex e, em seguida, a dire\u00e7\u00e3o dos itens flex:<\/p>\n Usando Assim como o exemplo anterior, Ao especificar colunas e linhas no sistema de grade, n\u00f3s adotamos uma abordagem diferente, passando em um n\u00famero que ir\u00e1 determinar como os elementos ir\u00e3o ocupar o espa\u00e7o dispon\u00edvel:<\/p>\n O Tailwind CSS vem com um monte de cores pr\u00e9-definidos. Cada cor tem um conjunto de varia\u00e7\u00f5es diferentes, com a varia\u00e7\u00e3o mais clara sendo 50 e a mais escura sendo 900.<\/p>\n Aqui est\u00e1 uma imagem de m\u00faltiplas cores e seus c\u00f3digos HTML hexadecimais<\/a> para ilustrar isto<\/p>\n Vamos dar um exemplo de como voc\u00ea pode fazer isso usando a cor vermelha acima para dar a um elemento de bot\u00e3o uma cor de fundo:<\/p>\n Esta sintaxe \u00e9 a mesma para todas as cores em Tailwind, exceto para preto e branco, que s\u00e3o escritas da mesma maneira, mas sem o uso de n\u00fameros Para adicionar a cor do texto, voc\u00ea usa a classe O Tailwind CSS j\u00e1 tem um sistema de design que o ajudaria a manter uma escala consistente em todos os seus designs. Tudo que voc\u00ea tem que saber \u00e9 a sintaxe para aplicar cada utilidade.<\/p>\n A seguir est\u00e3o as utilidades para adicionar padding aos seus elementos:<\/p>\n Para aplic\u00e1-los aos seus elementos, voc\u00ea teria que usar os n\u00fameros apropriados fornecidos pelo Tailwind – um pouco parecidos com os n\u00fameros que representavam as variantes de cores na \u00faltima se\u00e7\u00e3o. Aqui est\u00e1 o que queremos dizer:<\/p>\n As utilidades pr\u00e9-definidas para padding e margem s\u00e3o muito similares. Voc\u00ea tem que substituir o Mesmo que o Tailwind CSS tenha muitas utilidades e sistemas de projeto j\u00e1 constru\u00eddos para voc\u00ea, ainda \u00e9 poss\u00edvel que voc\u00ea tenha uma funcionalidade particular que voc\u00ea gostaria de adicionar para estender o que o Tailwind pode ser usado. O Tailwind CSS nos permite fazer isso atrav\u00e9s da cria\u00e7\u00e3o de um plugin.<\/p>\n Vamos sujar nossas m\u00e3os criando um plugin que adiciona a cor aqua e um utilit\u00e1rio de rota\u00e7\u00e3o que gira um elemento 150\u00ba no eixo X. Vamos fazer esses utilit\u00e1rios no arquivo tailwind.config.js<\/strong> usando um pouco de JavaScript<\/a>.<\/p>\n Agora, vamos quebrar isso. A primeira coisa que fizemos foi importar a fun\u00e7\u00e3o de plugin do Tailwind:<\/p>\n Ent\u00e3o n\u00f3s continuamos a criar nossos plugins na matriz de plugins:<\/p>\n Voc\u00ea pode ter que reexecutar o script de constru\u00e7\u00e3o depois de fazer seu plugin.<\/p>\n Agora que os plugins est\u00e3o prontos, n\u00f3s podemos test\u00e1-los:<\/p>\n Se voc\u00ea fez tudo certo, voc\u00ea deve ter um bot\u00e3o com uma cor aqua com o texto girado a 150\u00ba no eixo X.<\/p>\n\nO que \u00e9 Tailwind CSS?<\/h2>\n
![\"Tailwind](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/tailwind-css-homepage-1024x472.png\")
O que \u00e9 framework?<\/h2>\n
O que significa Framework Utility-First CSS?<\/h2>\n
![\"Nosso](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/button.png\")
Com Vanilla CSS<\/h3>\n
<button class=\"btn\">Click me<\/button><\/code><\/pre>\nbtn<\/code>, que ser\u00e1 estilizada usando uma folha de estilo externa. Ou seja:<\/p>\n.btn {\n background-color: #000;\n color: #fff;\n padding: 8px;\n border: none;\n border-radius: 4px;\n}<\/code><\/pre>\nCom vento de cauda CSS<\/h3>\n
<button class=\"bg-black text-white p-2 rounded\">Click me<\/button><\/code><\/pre>\nPr\u00e9-requisitos para usar o CSS Tailwind<\/h2>\n
\n
Onde o Tailwind CSS pode ser usado?<\/h3>\n
Pr\u00f3s e contras do Tailwind CSS<\/h3>\n
\n
\n
Quando usar o Tailwind CSS<\/h3>\n
Semelhan\u00e7as e diferen\u00e7as entre o Tailwind CSS e outros frameworks\u00a0CSS<\/h3>\n
\n
\n
Como come\u00e7ar a usar o Tailwind CSS<\/h2>\n
\n
-Tailwind-tutorial\n -public\n -index.html\n -styles.css\n -src\n -styles.css<\/code><\/pre>\nnpm install -D tailwindcss<\/code><\/pre>\nnpx tailwindcss init<\/code><\/pre>\nmodule.exports = {\n content: [\".\/src\/**\/*.{html,js}\", \".\/public\/*.html\"],\n theme: {\n extend: {},\n },\n plugins: [],\n};<\/code><\/pre>\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\nnpx tailwindcss -i .\/src\/styles.css -o .\/public\/styles.css --watch<\/code><\/pre>\n--watch<\/code> permite que o Tailwind assista seu arquivo para mudan\u00e7as para um processo de constru\u00e7\u00e3o autom\u00e1tica; omitir isso significa que n\u00f3s temos que executar esse script toda vez que queremos construir nosso c\u00f3digo e ver a sa\u00edda desejada.<\/p>\n\nUsando CSS Tailwind<\/h3>\n
Exemplo Flexbox<\/h4>\n
<div class=\"flex flex-row\">\n <button> Button 1 <\/button>\n <button> Button 2 <\/button>\n <button> Button 3 <\/button>\n <\/div><\/code><\/pre>\n![\"Nossos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/flexbox-container-1024x582.png\")
flex-row-reverse<\/code> ir\u00e1 reverter a ordem na qual os bot\u00f5es aparecem.<\/p>\nflex-col<\/code> os empilha uns sobre os outros. Aqui est\u00e1 um exemplo:<\/p>\n <div class=\"flex flex-col\">\n <button> Button 1 <\/button>\n <button> Button 2 <\/button>\n <button> Button 3 <\/button>\n <\/div><\/code><\/pre>\n![\"Nossos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/flex-col-1024x582.png\")
flex-col-reverse<\/code><\/strong> reverte a ordem.<\/p>\nExemplo de grade<\/h4>\n
<div class=\"grid grid-cols-3\">\n <button> Button 1 <\/button>\n <button> Button 2 <\/button>\n <button> Button 3 <\/button>\n <button> Button 4 <\/button>\n <button> Button 5 <\/button>\n <button> Button 6 <\/button>\n <\/div><\/code><\/pre>\n![\"Nossos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/grid-col-1024x582.png\")
Cores<\/h4>\n
![\"Personaliza\u00e7\u00e3o](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/01\/tailwind-color-variants-1024x617.png\")
<button class=\"bg-red-50\">Click me<\/button>\n<button class=\"bg-red-100\">Click me<\/button>\n<button class=\"bg-red-200\">Click me<\/button>\n<button class=\"bg-red-300\">Click me<\/button>\n<button class=\"bg-red-400\">Click me<\/button>\n<button class=\"bg-red-500\">Click me<\/button>\n<button class=\"bg-red-600\">Click me<\/button>\n<button class=\"bg-red-700\">Click me<\/button>\n<button class=\"bg-red-800\">Click me<\/button>\n<button class=\"bg-red-900\">Click me<\/button><\/code><\/pre>\nbg-black<\/code> e bg-white<\/code>.<\/p>\ntext-{color}<\/code>:<\/p>\n<p class=\"text-yellow-600\">Hello World<\/p><\/code><\/pre>\nPadding<\/h4>\n
\n
p<\/code> denota o preenchimento de todo o elemento.<\/li>\npy<\/code> denota padding padding-top e padding-bottom.<\/li>\npx<\/code> denota padding-esquerda e padding-direita.<\/li>\npt<\/code> denota padding-top.<\/li>\npr<\/code> denota padding-direita.<\/li>\npb<\/code> denota padding-baixo.<\/li>\npl<\/code> denota padding-esquerda<\/li>\n<\/ul>\n<button class=\"p-0\">Click me<\/button>\n<button class=\"pt-1\">Click me<\/button>\n<button class=\"pr-2\">Click me<\/button>\n<button class=\"pb-3\">Click me<\/button>\n<button class=\"pl-4\">Click me<\/button><\/code><\/pre>\nMargem<\/h4>\n
p<\/code> por um m<\/code>:<\/p>\n\n
m<\/code><\/li>\nmy<\/code><\/li>\nmx<\/code><\/li>\nmt<\/code><\/li>\nmr<\/code><\/li>\nmb<\/code><\/li>\nml<\/code><\/li>\n<\/ul>\nComo criar um plugin com o Tailwind CSS<\/h2>\n
const plugin = require(\"tailwindcss\/plugin\");\n\nmodule.exports = {\n content: [\".\/src\/**\/*.{html,js}\", \".\/public\/*.html\"],\n theme: {\n extend: {},\n },\n plugins: [\n plugin(function ({ addUtilities }) {\n const myUtilities = {\n \".bg-aqua\": { background: \"aqua\" },\n \".rotate-150deg\": {\n transform: \"rotateX(150deg)\",\n },\n };\n addUtilities(myUtilities);\n }),\n ],\n\n};<\/code><\/pre>\nconst plugin = require(\"tailwindcss\/plugin\");<\/code><\/pre>\n plugins: [\n plugin(function ({ addUtilities }) {\n const newUtilities = {\n \".bg-aqua\": { background: \"aqua\" },\n \".rotate-150deg\": {\n transform: \"rotateX(150deg)\",\n },\n };\n addUtilities(newUtilities);\n }),\n ],<\/code><\/pre>\n<button class=\"bg-aqua rotate-150deg\">Click me<\/button><\/code><\/pre>\nResumo<\/h2>\n