Tailwind CSS é uma estrutura CSS utilitária repleta de classes que podem ser compostas para construir qualquer design, diretamente em sua marcação.

Características:

Utilitário em primeiro lugar:

Tailwind css é uma estrutura CSS utilitária que fornece classes utilitárias de baixo nível para construir designs personalizados sem escrever css. Essa abordagem nos permite implementar um design de componente completamente personalizado sem escrever uma única linha de CSS personalizado. "Você não está desperdiçando energia inventando nomes de classes".

Limpeza de conteúdo:

É o processo de remoção de classes CSS não utilizadas do arquivo CSS final que será utilizado no ambiente de produção. É um processo de otimização em que o tamanho CSS final é menor, mais fácil de manter e apresenta melhor desempenho.

Comandos:

Sublinhado:

underline 
underline-offset-
decoration-- //color for underline
decoration- // size of underline
decoration-

Estilização de texto

text-- //color of text
text-opacity- //opacity of text
text- //size of text
text- //alignment of text

Cor de fundo

bg--

Raio da borda

rounded-

Estilo da fonte

font-

Itálico:

italic

Visibilidade

Ocultar elementos:

hidden

Exibir (oposto a ocultar):

block

Preenchimento

p-   /* All sides */
px-  /* Horizontal (left and right) */
py-  /* Vertical (top and bottom) */
pl-  /* Left */
pr-  /* Right */
pt-  /* Top */
pb-  /* Bottom */

Margem

m-   /* All sides */
mx-  /* Horizontal (left and right) */
my-  /* Vertical (top and bottom) */
ml-  /* Left */
mr-  /* Right */
mt-  /* Top */
mb-  /* Bottom */

Flexbox

flex
flex- // row or column

Justificar conteúdo

justify-

Alinhar itens

items- //start,end,center

Design Responsivo

sm  /* Small devices */
md  /* Medium devices */
lg  /* Large devices */
xl  /* Extra large devices */

Dimensionamento

h-
w-

Fronteiras

border
border-
border-

Estados de foco

hover: