# O que é Utility-first?

É uma abordagem para criar estilos rapidamente usando comandos (classes) pequenos e funcionais predefinidos ao projetar.

## Definição
Em vez de escrever códigos CSS longos para cada elemento, você cria o design combinando pequenos comandos prontos, como 'cor azul', 'margem-10'. Este método garante um desenvolvimento consistente e rápido do projeto.

## Como funciona
Você adiciona tags curtas em seus códigos HTML que especificam a aparência do design.

## Onde é usado
É frequentemente usado em web design moderno e especialmente em bibliotecas como Tailwind CSS.

## Costuma ser confundido com
Pode ser confundido com a estrutura CSS; utility-first é um método, enquanto o framework CSS é a ferramenta que implementa esse método.

## Perguntas frequentes
**O código não parece muito lotado?**
Pode parecer à primeira vista, mas é uma grande vantagem poder ver todo o design em um só lugar, sem alternar entre arquivos.


## Termos relacionados
- [CSS Framework](/pt/dictionary/css-framework/)
- [Frontend Stack](/pt/dictionary/frontend-stack/)
- [User Interface](/pt/dictionary/user-interface/)

## Ferramentas relacionadas
- [Tailwindcss](/pt/discover/tailwindcss/)

---
Fonte: TreScout Glossário · https://trescout.com/pt/dictionary/utility-first/