𝕏 (Twitter) Descentralizado

Instalando Tailwind no seu projeto Vue

Tailwind é um framework CSS para estilizar seu código HTML de forma mais rápida.

Lembre-se: o intuito dessa aula não é ensinar o básico de programação web como HTML, CSS e Javascript. Se você é iniciante, dê uma olhada nesse vídeo.

Para instalar o Tailwind nós vamos abrir o projeto x-front-end no VSCode, abrir o terminal e digitar o comando:

npm install -D tailwindcss postcss autoprefixer

Em seguida execute o seguinte código no terminal:

npx tailwindcss init -p

Abra o arquivo tailwind.config.js e atualize com esse código:

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

Abra o arquivo src/assets/main.css, apague tudo e cole o seguinte código:

@tailwind base;
@tailwind components;
@tailwind utilities;

Limpando os arquivos desnecessários e testando o Tailwind

Dentro da pasta src/assets/ apague tudo e deixe somente o arquivo main.css.

Apague também tudo dentro da pasta src/components/, nós não vamos usá-la agora.

Dentro do arquivo src/App.vue apague tudo e cole o seguinte código:

<script setup></script>

<template>
  <main
    class="bg-gray-900 min-h-screen flex items-center justify-center flex-col p-20"
  >
    <div
      class="rounded-md border border-gray-700 text-white bg-gray-800 p-6 mx-auto w-full max-w-[600px]"
    >
      <h1 class="text-2xl mb-4">𝕏 (Twitter) Descentralizado</h1>
      <p class="text-base mb-4">
        Esse é um twitter descentralizado, conecte sua sua carteira blockchain e
        use seus Ethereums para enviar uma mensagem. Cada post enviado você terá
        chance de ganhar um valor de Ethereum de volta.
      </p>
    </div>
  </main>
</template>

Nesse código acima há apenas HTML e CSS (Tailwind), nas próximas aulas nós vamos usar esse código para fazer as interações com os contratos inteligentes que criamos no tópico Crie seu primeiro contrato utilizando JavaScript/Vue dentro da primeira linha <script setup></script>.

Boa, queria falar que você tá mandando muito! Agora abra o terminal, rode o comando npm run dev e a sua tela deve ser semelhante a essa quando acessar o link http://localhost:5173/:

Salvando as atualizações no GitHub

Pare de rodar o projeto clicando no terminal e apertando Ctrl + C e rode os seguintes comandos em sequência:

1. git add .
2. git commit -m "feat: adicionando tailwind"
3. git push

Pronto! Agora você tem um projeto Vue com Tailwind instalado, seus arquivos foram salvos no GitHub e em alguns minutos você poderá visualizar as atualizações em produção com o link que você enviou na tarefa da aula anterior.