Integração com o Tailwind CSS
O Tailwind CSS é um framework CSS utilitário que utiliza classes pré-definidas para estilizar rapidamente elementos HTML. Sua abordagem “utility-first” oferece flexibilidade e personalização, permitindo criar interfaces eficientes e consistentes. É adequado para projetos de grande escala, promovendo a reutilização de código.
Instalação
Para instalar o TailwindCSS no projeto VueJS, basta executar o comando abaixo:
npm install -D tailwindcss postcss autoprefixer
Agora, crie os arquivos de configuração do Tailwind CSS
npx tailwindcss init -p
Configuração
No arquivo tailwind.config.js, adicione dentro dos colchetes de “content”, o caminho de seus arquivos para o framework saber aonde ele deve procurar pelas classes, para poder aplica-las.
'./index.html', './src/**/*.{vue,js,ts,jsx,tsx}';
Aqui, você especificou para ele procurar pelas suas classes no index.html, e em todos os arquivos que estiverem dentro da pasta src.
Agora, vá na pasta assets(que está dentro de src), apague todos os arquivos dentro dela, e crie um arquivo chamado tailwind.css dentro do arquivo, inclua o seguinte código para importas as bibliotecas do Tailwind CSS.
@tailwind base;
@tailwind components;
@tailwind utilities;
E então, na arquivo main.js, importe o arquivo criado.
import './assets/tailwind.css';
Agora, o vue deve estar pronto para receber classes do Tailwind CSS.
Uso
Para utilizar o Tailwind CSS no projeto VueJS, basta adicionar as classes CSS do Tailwind CSS nos elementos HTML.
<button class="bg-black text-white">Botão</button>
Esse código acima pode ser utilizado em qualquer componente VueJS, no bloco template.
Sempre use a documentação do Tailwind CSS para utilizar bem o framework: tudo que você precisa está aqui
É altamente recomendando você usar a extensão do VS Code da própria Tailwind, pois ela ira te auxiliar a usar o framework de forma dinâmica.
< Tutorial de integração com o Bootstrap Tutorial de integração com o Tailwind >