VueJS + Tailwind + DaisyUI = 😎🌷
Published: 2024-05-20 18:36:23

Vue é um robusto framework JavaScript dedicado à construção de interfaces de usuário interativas e dinâmicas. Esta ferramenta poderosa é construída sobre os fundamentos da web moderna: HTML, CSS e JavaScript. Com um modelo de programação declarativo e baseado em componentes, o Vue capacita os desenvolvedores a criar interfaces de usuário de qualquer complexidade de forma eficiente e organizada.

Além disso, abrange a maioria dos recursos comuns necessários no desenvolvimento de frontend. No entanto, a web é extremamente diversa - as coisas que construímos na web podem variar drasticamente em forma e escala. Com isso em mente, Vue é projetado para ser flexível e adotável incrementalmente. Dependendo do seu caso de uso, Vue pode ser utilizado de diferentes maneiras:

- Aprimorando HTML estático sem um passo de compilação
- Incorporando como Componentes da Web em qualquer página
Aplicação de Página Única (SPA)
- Fullstack / Renderização do Lado do Servidor (SSR)
- Jamstack / Geração de Site Estático (SSG)
- Direcionamento para desktop, mobile, WebGL e até mesmo o terminal

Para criar um novo projeto Vue, certifique-se de ter uma versão atualizada do Node.js instalada e que seu diretório de trabalho atual seja o onde pretende criar um projeto. Execute o seguinte comando em sua linha de comando:

```powershell
npm create vue@latest
```

```
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit testing? … No
✔ Add an End-to-End Testing Solution? … No
✔ Add ESLint for code quality? … Yes
✔ Add Prettier for code formatting? … No
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No

Scaffolding project in ./<your-project-name>...
Done.
```

```powershell
cd <your-project-name>
npm install
npm run dev
```

Com isso você já possui um projeto Vue sendo executado localmente.

O projeto pode ser integrado com Tailwind CSS, sendo 
um framework CSS orientado para utilitários, repleto de classes como flex, pt-4, text-center e rotate-90, que podem ser combinadas para construir qualquer design diretamente em seu markup.

Para instalá-lo em seu projeto, basta executar a instalação das dependências abaixo:

```powershell
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

Configure o arquivo `tailwind.config.js` adicionando em seu content as diretivas:

```js
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}",],
```

Adicione as diretivas do tailwind no arquivo CSS carregado no componente central (ou carrego-o manualmente com as diretivas abaixo):

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

Para finalizar a configuração do projeto, vamos adicionar o plugin daisyUI - Tailwind CSS. O daisyUI adiciona nomes de classes de componentes ao Tailwind CSS para que você possa criar websites bonitos mais rapidamente.

Para adicioná-lo ao projeto, basta executar os comandos abaixo:

```powershell
npm i -D daisyui@latest
```

E configurá-lo no arquivo `tailwind.config.js`:

```js
export default {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}",],
  theme: {
    extend: {

    },
  },
  plugins: [require('daisyui'),],
}
```

Com esses passos, seu projeto Vue estará pronto para criar interfaces de usuário dinâmicas e esteticamente agradáveis de forma eficiente. A combinação do Vue com o Tailwind CSS e o daisyUI oferece uma experiência de desenvolvimento ágil e flexível, permitindo que você se concentre na criação de ótimas experiências para os usuários finais.


## Referências
- https://vuejs.org
- https://tailwindcss.tw
- https://daisyui.com