Utility-First: O que é?

Tradicionalmente os frameworks CSS disponibilizam componentes com estilos predefinidos (cores, fontes, espaçamentos, etc). Acontece que às vezes precisamos alterar esses componentes e essa personalização pode se tornar muito complexa.

A questão é: Como criar um framework CSS que facilite o nosso trabalho, mas que também seja altamente flexível? É nesse contexto que surge a abordagem Utility-first.

Em vez de disponibilizar componentes, a ideia do Utility-first é disponibilizar classes CSS atômicas e imutáveis. Ou seja, a flexibilidade é alcançada por meio da combinação dessas classes.

De maneira bem prática e resumida, o objetivo é disponibilizar pequenas classes CSS para definição de margens, cores, tamanho de fonte, entre outros. Se quer saber sobre Utility-first recomendo que você leia este artigo escrito por Sarah Dayan.

Utility-First: É igual CSS inline?

Este é um questionamento bem comum quando as pessoas se deparam com essa técnica pela primeira vez. Mas lhe digo que não é igual.

Quando você escreve o CSS inline a rastreabilidade dos estilos fica comprometida, a quantidade de caracteres digitados nos elementos HTML é maior e, por fim, fica complicado de utilizar media queries e pseudo-classes. Para mais detalhes veja este tópico no site do Tailwind.

Tailwind CSS: Framework focado em Utility-First

O Utility-First ganhou muito espaço nos últimos anos e consequentemente surgiram várias bibliotecas implementando essa técnica. Influenciado por esse movimento, a versão 4 do Bootstrap até ganhou um módulo específico para Utilities.

Atualmente o Tailwind CSS é a biblioteca mais popular e completa, quando o assunto é Utility-first, . Criado em 2017 por Adam Wathan, o Tailwind é um framework que foi escrito como um plugin do PostCSS.

Desta forma, o Tailwind não precisa de pré-processadores CSS para funcionar. Mas isso não quer dizer que não seja possível integrá-lo à algum pré-processador. Vale ressaltar que essa integração não é foco deste artigo, mas se você deseja saber mais sobre isso veja este tópico na documentação oficial.

Você deve estar curioso para ver como código fica, então segue um exemplo disponível no site do Tailwind:

<div class="bg-white rounded-lg p-6">
  <img class="h-16 w-16 rounded-full mx-auto" src="avatar.jpg" />
  <div class="text-center">
    <h2 class="text-lg">Paul McCartney</h2>
    <div class="text-purple-500">Singer</div>
    <div class="text-gray-600">paul@example.com</div>
    <div class="text-gray-600">(+55) 11 90000-0000</div>
  </div>
</div>

Como falei inicialmente são várias classes atômicas, que quando combinadas formam um layout. Por exemplo, a classe bg-white é para deixar o fundo branco, a classe text-center é para deixar o texto centralizado e só seguir essa lógica.

Para saber todas as classes disponibilizadas pelo Tailwind, é só consultar a documentação oficial no site do Tailwind.

Tailwind CSS: Instalar e Configurar

Para usar o Tailwind, primeiro você instala o pacote via NPM (ou YARN se você preferir) com o comando:

npm install tailwindcss --save

A partir disso, você cria um arquivo CSS e adiciona alguns comandos para importar o Tailwind. Por exemplo:

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

Agora é só processar o arquivo com o Tailwind CLI por meio deste comando:

npx tailwind build styles.css -o output.css

O arquivo resultante deste processo (output.css) conterá todas as classes do Tailwind. Caso você queira adicionar mais opções ou alterar as opções existentes, basta criar um arquivo com o nome tailwind.config.js e seguir a instruções que estão neste link.

Vue.js e Tailwind CSS

Como o Tailwind é um plugin do PostCSS e o Vue.js usa internamente o PostCSS para processamento dos estilos, fica fácil de fazer essa integração.

Importante ressaltar que os passos a seguir partem do princípio que você já tenha um projeto Vue.js criado e configurado.

Primeiramente faça a instalação do Tailwind CSS com o comando:

npm install tailwindcss --save

Posteriormente crie o arquivo ./postcss.config.js no diretório raiz do projeto e coloque este conteúdo:

module.exports = {
  plugins: [require('tailwindcss'), require('autoprefixer')],
};

Agora crie um arquivo CSS com o seguinte conteúdo:

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

E por fim, importe esse arquivo CSS no arquivo ./src/main.js:

import Vue from 'vue';
import App from './App.vue';

import './style.css';

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

Pronto agora é só usar classes do Tailwind dentro da sua template HTML.

Vue.js e Tailwind CSS: Single File Component

Em vez de importar o Tailwind por meio de um arquivo CSS (como fizemos anteriormente), você pode importar o Tailwind no seu projeto Vue.js por meio tag style do Single File Component. O código fica da seguinte maneira:

<template>
  <div class="bg-red-700 text-white text-center">
    My app with Vue.js and Tailwind
  </div>
</template>

<script>
export default {
  name: 'app',
};
</script>

<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>

Vale ressaltar que toda diretiva personalizada do Tailwind (como @tailwind base), pode ser declarada dentro do Sigle File Component ou dentro de um arquivo CSS específico.

Componentes do Tailwind CSS

Por fim, quero deixar uma última dica que pode lhe evitar muita dor de cabeça.

Um efeito colateral do Tailwind, é que seu código HTML pode ficar muito extenso. Por isso o Tailwind dá opção de criar componentes baseados nas classes disponibilizadas. Em outras palavras, seria um mixin ou um agrupamento de várias classes CSS em uma só.

Por exemplo a declaração tradicional de um botão com Tailwind seria dessa maneira:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  My Button
</button>

Para deixar a leitura do HTML mais fácil, segue um exemplo de como criar um componente de um botão baseado nas classes originais do Tailwind:

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 text-white;
}
.btn-blue:hover {
  @apply bg-blue-700;
}

Vale ressaltar que o código acima pode ser inserido dentro da tag style de um Single File Component, ou dentro de algum arquivo CSS separado.

A partir disso, a declaração HTML do botão fica desta maneira:

<button class="btn btn-blue">
  My Button
</button>

Para finalizar, quero deixar claro que neste artigo eu usei o Vue.js na versão 2.6 e o Tailwind na versão 1.1.

Dúvidas ou sugestões é só entrar em contato. Abraço.