Tailwind CSS Learnings

Tailwind CSS é um framework CSS que permite criar rapidamente interfaces customizáveis. Em vez de fornecer estilos predefinidos para componentes como muitos frameworks , o Tailwind CSS oferece uma série de classes que podem ser combinadas para construir qualquer design diretamente no HTML

✍️ Mini projetos

Interface de um site de Hoteis e Resorts

🔗 Deploy

Confira aqui o projeto

Interface login League Of Legends

🔗 Deploy

Confira aqui o projeto

⚓ Inline Style

<!-- Isso não é possível com inline styles -->
<div style="background-color: red;">Conteúdo</div>
<!-- A media query não pode ser aplicada aqui -->

<div style="color: blue;">Texto</div>
<!-- Não é possível definir estilos para hover ou focus inline -->

<div style="color: red; padding: 10px;">Texto 1</div>
<div style="color: red; padding: 10px;">Texto 2</div>
<!-- Cada elemento deve ter estilos repetidos manualmente -->

⚒️ Instalação

Crie um Projeto Vite

Crie um novo projeto Vite.

npm create vite@latest my-vite-project --template vanilla

cd my-vite-project

Instalar Tailwind CSS

Instale Tailwind CSS e suas dependências:

npm install -D tailwindcss postcss autoprefixer

inicialize a configuração do Tailwind CSS:

npx tailwindcss init

Isso criará um arquivo tailwind.config.js na raiz.

Configurar o Tailwind CSS

No arquivo tailwind.config.js configure os caminhos para todos os arquivos de modelo, adicionando dentro de content:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Configurar PostCSS

Crie um arquivo postcss.config.js e adicione:

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Adicionando Tailwind CSS ao CSS

No diretório src, crie um arquivo CSS styles.css e adicione:

cssCopiar código
@tailwind base;
@tailwind components;
@tailwind utilities;

Em seguida, importe este arquivo CSS no main.js.

import './styles.css';

Rodando o Projeto

npm run dev

Estrutura

project/
├── index.html
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── src/
│   ├── main.js
│   └── styles.css
└── vite.config.js

🅰️ Tipografia

Usar a tipografia no Tailwind CSS é simples e flexível.

Tamanho da Fonte (Font-size)

<p class="text-xs">Texto extra pequeno</p>
<p class="text-sm">Texto pequeno</p>
<p class="text-base">Texto padrão</p>
<p class="text-lg">Texto grande</p>
<p class="text-xl">Texto extra grande</p>
<p class="text-2xl">Texto 2x extra grande</p>
<p class="text-3xl">Texto 3x extra grande</p>
<p class="text-4xl">Texto 4x extra grande</p>
<p class="text-5xl">Texto 5x extra grande</p>
<p class="text-6xl">Texto 6x extra grande</p>

Peso da Fonte (Font-weight)

<p class="font-thin">Fonte fina</p>
<p class="font-extralight">Fonte extra leve</p>
<p class="font-light">Fonte leve</p>
<p class="font-normal">Fonte normal</p>
<p class="font-medium">Fonte média</p>
<p class="font-semibold">Fonte semi-negrito</p>
<p class="font-bold">Fonte negrito</p>
<p class="font-extrabold">Fonte extra negrito</p>
<p class="font-black">Fonte preta</p>

Espaçamento entre Letra (letter-spacing)

<p class="tracking-tighter">Espaçamento entre letras muito apertado</p>
<p class="tracking-tight">Espaçamento entre letras apertado</p>
<p class="tracking-normal">Espaçamento entre letras normal</p>
<p class="tracking-wide">Espaçamento entre letras largo</p>
<p class="tracking-wider">Espaçamento entre letras muito largo</p>
<p class="tracking-widest">Espaçamento entre letras máximo</p>

Alinhamento de Texto (text-align)

<p class="tracking-tighter">Espaçamento entre letras muito apertado</p>
<p class="tracking-tight">Espaçamento entre letras apertado</p>
<p class="tracking-normal">Espaçamento entre letras normal</p>
<p class="tracking-wide">Espaçamento entre letras largo</p>
<p class="tracking-wider">Espaçamento entre letras muito largo</p>
<p class="tracking-widest">Espaçamento entre letras máximo</p>

Cor do Texto (color)

<p class="text-red-500">Texto vermelho</p>
<p class="text-blue-500">Texto azul</p>
<p class="text-green-500">Texto verde</p>
<p class="text-gray-500">Texto cinza</p>
<p class="text-black">Texto preto</p>
<p class="text-white">Texto branco</p>

Clique no ícone para acessar

✒️ Cores

<div class="bg-red-500 text-white p-4">Red 500</div>
<div class="bg-green-500 text-white p-4">Green 500</div>
<div class="bg-blue-500 text-white p-4">Blue 500</div>
<div class="bg-yellow-500 text-black p-4">Yellow 500</div>

Clique no ícone para acessar

➡️ Spacing

Margin

<div class="m-4">Margem de 1rem em todos os lados</div>

<div class="mt-4">Margem superior de 1rem</div>
<div class="mr-4">Margem direita de 1rem</div>
<div class="mb-4">Margem inferior de 1rem</div>
<div class="ml-4">Margem esquerda de 1rem</div>

<div class="mx-4">Margem horizontal de 1rem (esquerda e direita)</div>
<div class="my-4">Margem vertical de 1rem (superior e inferior)</div>

Padding

<div class="p-4">Padding de 1rem em todos os lados</div>

<div class="pt-4">Padding superior de 1rem</div>
<div class="pr-4">Padding direito de 1rem</div>
<div class="pb-4">Padding inferior de 1rem</div>
<div class="pl-4">Padding esquerdo de 1rem</div>

<div class="px-4">Padding horizontal de 1rem (esquerda e direita)</div>
<div class="py-4">Padding vertical de 1rem (superior e inferior)</div>

Espaçamento entre Elementos (space-x e space-y)

space-x e space-y são usados para adicionar espaçamento entre elementos filhos ao longo dos eixos horizontal e vertical, respectivamente

<div class="flex space-x-4">
  <div class="bg-red-500 p-4">Item 1</div>
  <div class="bg-green-500 p-4">Item 2</div>
  <div class="bg-blue-500 p-4">Item 3</div>
</div>

<div class="space-y-4">
  <div class="bg-red-500 p-4">Item 1</div>
  <div class="bg-green-500 p-4">Item 2</div>
  <div class="bg-blue-500 p-4">Item 3</div>
</div>

🪡 Bordas

<div class="border">
  Este elemento tem uma borda padrão.
</div>

Largura da Borda

Para definir a largura da borda, você pode usar as classes border-{tamanho/size}

<div class="border-2">
  Este elemento tem uma borda de 2 pixels.
</div>
<div class="border-4">
  Este elemento tem uma borda de 4 pixels.
</div>

Cor da Borda

Para mudar a cor da borda use a classe border-{color}

Ring

O ring no Tailwind CSS é uma maneira de adicionar uma borda externa ao redor de um elemento, semelhante a uma borda, mas que fica fora do box model padrão do CSS

  <button
        class="bg-blue-400 font-semibold px-4 py-1 rounded text-white ring-2 hover:bg-slate-800"
      >
        SAVE
      </button>

Border Radius (rounded)

<div class="rounded-lg border border-gray-500 p-4">
  Borda arredondada uniformemente.
</div>

    <div class="m-5 p-4 border-2 border-red-400 rounded-md">
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid
        ratione fuga, totam accusamus odio illo quidem corporis explicabo
        ducimus modi eius omnis praesentium itaque, perferendis reprehenderit
        nesciunt repudiandae maiores tempore!
      </p>
      <br />


      <button
        class="bg-blue-400 font-semibold px-4 py-1 rounded text-white ring-2 hover:bg-slate-800"
      >
        SAVE
      </button>
    </div>

🤩 Background Image

Esta classe permite que você defina a imagem de fundo, ajuste seu posicionamento, tamanho, repetição e mais.

você pode usar a cla