Tailwind: Preparando o Visual Studio Code
![Tailwind: Preparando o Visual Studio Code](assets/tailwind-preparando-visual-studio-code/tailwind-preparando-visual-studio-code.png)
Antes de começar o desenvolvimento de um projeto, é importante garantir que temos tudo para começar. Principalmente nossas ferramentas. O Tailwind é um framework CSS utilizado em conjunto com outros frameworks JavaScript como React, Next.js e Vue, mas ele também pode ser usado sozinho ou com alguma ferramenta de building.
Neste post o foco é falar das extensões e ferramentas necessárias, e não como instalar e configurar o Tailwind.
PostCSS Language Support
![Arquivo README do github da extensão PostCSS](assets/tailwind-preparando-visual-studio-code/imagem2.png)
Após a instalação do Tailwind CSS, é necessário a criação de um arquivo CSS inicial onde serão importados arquivos básicos através das diretivas do framework, como @tailwind base;
, @tailwind components;
e @tailwind utilities;
. O problema é que o VS Code por padrão não consegue reconhecer essas diretivas e erros são apontados. Então uma extensão muito boa para acabar com esses erros é a PostCSS Language Support. Essa extensão adiciona o suporte para funcionalidades experimentais do CSS, como neste caso, diretivas customizadas. Essa extensão tem até suporte adicional para o plugin EMMET.
![Banner promocional da Alura, com um design futurista em tons de azul, apresentando o texto](assets/guia-de-carreira-front-end-alura/guia-de-carreira-front-end-alura-banner-corpo-mobile.png)
Tailwind CSS IntelliSense
![Página inicial do plugin Tailwind CSS IntelliSense no marketplace de plugins do Visual Studio Code.](assets/tailwind-preparando-visual-studio-code/imagem3.png)
Agora que resolvemos os problemas das diretivas, começaremos a escrever códigos com Tailwind, certo? Bom, até podemos, mas você precisa ter decorado grande parte da documentação para saber precisamente como escrever as classes de utilidade e as estruturas das diretivas para criar classes customizadas e para facilitar nossas vidas, a extensão Tailwind CSS IntelliSense existe.
Ela é uma extensão oficial da equipe que criou o Tailwind e oferece suporte para todas funcionalidades do framework. Só é importante ter o arquivo de configuração do Tailwind criado antes de usar. Caso não tenha esse arquivo ainda pode utilizar o comando npx tailwind init
.
Ajuda com nomes de classes e criação de diretivas? A extensão ajuda a completar a escrita de classes, diretivas e até mesmo funções CSS com sugestões.
![Exemplo de código HTML com a funcionalidade de sugestões ativada para nomes de classes do Tailwind.](assets/tailwind-preparando-visual-studio-code/imagem4.png)
Não sabe se escreveu a estrutura correta de funções e diretivas? A extensão oferece uma funcionalidade de linter para avisar e sugerir correções em seu código.
![Exemplo de escrita de uma classe customizada e com erros que são apontados em destaque. Em outro painel do Visual Studio Code estão sugestões de como resolver esses erros.](assets/tailwind-preparando-visual-studio-code/imagem5.png)
Conclusão
Como vimos, não são necessárias muitas configurações, ferramentas ou plugins para utilizar o Tailwind com o VS Code. Ele é um framework CSS muito interessante para desenvolvimento e criação de páginas personalizadas, aliado a um bom apoio ferramental.