La feuille de triche de Tailwind

Liste de référence des propriétés CSS courantes que vous voudrez utiliser dans Tailwind, et leurs classes relatives

J'ai écrit cette feuille de triche parce que je me retrouve constamment à faire référence à la documentation Tailwind pour rappeler une classe particulière (je commence et je n'ai pas encore de mémoire musculaire pour cela)

Voici les choses que j'utilise le plus.

Marge et rembourrage

Composez ces 3 tableaux. Ajoutez un tiret avant la valeur (par exemplept-2,m-auto)

symbole Description
p Rembourrage
m Marge
-m Marge négative
symbole Description
t Sommet
r Droit
b Bas
l Gauche
X Horizontal
y Verticale
Évaluer Description
0 0
1 0.25rem
2 0.5rem
3 0.75rem
4 1rem
5 1.25rem
6 1.5rem
8 2rem
10 2.5rem
12 3rem
16 4rem
20 5rem
24 6rem
32 8rem
px 1px
auto auto

margin: 0 auto

J'utilise parfoismargin: 0 autopour centrer les choses.

La classemx-autol'applique.

Largeur

Classer CSS
w-1 width: 0.25rem
w-2 width: 0.5rem
w-3 width: 0.75rem
w-4 width: 1rem
w-6 width: 1.5rem
w-8 width: 2rem
w-10 width: 2.5rem
w-12 width: 3rem
w-16 width: 4rem
w-24 width: 6rem
w-32 width: 8rem
w-48 width: 12rem
w-64 width: 16rem
w-auto width: auto
w-px width: 1px
w-12 width: 50%
w-13 width: 33.33333%
w-23 width: 66.66667%
w-14 width: 25%
w-34 width: 75%
w-15 width: 20%
w-25 width: 40%
w-35 width: 60%
w-45 width: 80%
w-16 width: 16.66667%
w-56 width: 83.33333%
w-plein width: 100%
écran w width: 100vw

Largeur maximale

Classer CSS
max-w-xs max-width: 20rem
max-w-sm max-width: 30rem
max-w-md max-width: 40rem
max-w-lg max-width: 50rem
max-w-xl max-width: 60rem
max-w-2xl max-width: 70rem
max-w-3xl max-width: 80rem
max-w-4xl max-width: 90rem
max-w-5xl max-width: 100rem
max-w-plein max-width: 100%

Largeur min

Classer CSS
min-w-0 min-width: 0
min-w-plein min-width: 100%

Famille de polices

Classer CSS
font-sans font-family: system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
police-serif font-family: Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif;
font-mono font-family: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

Taille de police

Classer CSS
text-xs font-size: .75rem
text-sm font-size: .875rem
base de texte font-size: 1rem
texte-lg font-size: 1.125rem
text-xl font-size: 1.25rem
texte-2xl font-size: 1.5rem
texte-3xl font-size: 1.875rem
texte-4xl font-size: 2.25rem
texte-5xl font-size: 3rem

Poids de la police

Classer CSS
police-cheveux font-weight: 100
police fine font-weight: 200
police-lumière font-weight: 300
font-normal font-weight: 400
police-moyenne font-weight: 500
font-semibold font-weight: 600
Caractères gras font-weight: 700
font-extrabold font-weight: 800
police-noir font-weight: 900

Couleurs

Tailwind nous fournit les classes que nous pouvons utiliser pour faire correspondre la couleur correspondante:

  • transparent
  • black
  • gray
  • white
  • red
  • orange
  • yellow
  • green
  • teal
  • blue
  • indigo
  • purple
  • pink

Avertissement:grayétaitgreyavant TailWind 1.0. Gardez cela à l'esprit si vous avez un projet plus ancien.

Chaque couleur a différents niveaux. Vous pouvez utiliser-100jusqu'à-900pour faire passer la couleur de moins intense à plus intense:

  • orange-100
  • orange-200
  • orange-300
  • orange-400
  • orange-500
  • orange-600
  • orange-700
  • orange-800
  • orange-900

Couleur du texte

Prependtext-à n'importe quelle couleur

Couleur de l'arrière plan

Prependbg-à n'importe quelle couleur

Texte au centre

Utilisationtext-center

Hauteur de la ligne

Classer CSS
.leading-aucun line-height: 1
.leader-serré line-height: 1.25
.leading-normal line-height: 1.5
.leading-loose line-height: 2

Flexbox

Récipient

Classer CSS
fléchir display: flex
flex en ligne display: inline-flex

Articles

Direction

Classer CSS
ligne flexible flex-direction: row
flex-row-reverse flex-direction: row-reverse
flex-col flex-direction: column
flex-col-reverse flex-direction: column-reverse

Emballage

Classer CSS
flex-no-wrap flex-wrap: nowrap
flex-wrap flex-wrap: wrap
flex-wrap-reverse flex-wrap: wrap-reverse

Aligner les éléments

Classer CSS
articles-stretch align-items: stretch
articles-début align-items: flex-start
centre d'articles align-items: center
fin des articles align-items: flex-end
items-baseline align-items: baseline

Aligner le contenu

Classer CSS
content-start align-content: flex-start
centre de contenu align-content: center
fin de contenu align-content: flex-end
contenu entre align-content: space-between
contenu autour align-content: space-around

Alignez-vous

Classer CSS
auto-auto align-self: auto
démarrage automatique align-self: flex-start
autocentrage align-self: center
fin de soi align-self: flex-end
auto-étirement align-self: stretch

Justifier le contenu

Classer CSS
justifier-démarrer justify-content: flex-start
justifier-centre justify-content: center
justifier la fin justify-content: flex-end
justifier-entre justify-content: space-between
justifier justify-content: space-around

Flex, grandir, rétrécir

Classer CSS
flex-initial flex: initial
flex-1 flex: 1
flex-auto flex: auto
flex-aucun flex: none
Flex-Grow flex-grow: 1
flex-shrink flex-shrink: 1
flex-no-grow flex-grow: 0
flex-no-shrink flex-shrink: 0

Modificateurs

Flotter

hover:

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS: