Joan edukira
Bai
EspañolEnglishEuskara Hasi →

Tresnak

Tailwind CSS laburpena

Tailwind CSS klaseen eta sortzen duten CSSaren kontsulta azkarra.

Pribatua diseinuz
Klasea
CSS
sm:adib. sm:flex
@media (min-width: 640px)
md:adib. md:grid-cols-2
@media (min-width: 768px)
lg:adib. lg:px-8
@media (min-width: 1024px)
xl:adib. xl:max-w-6xl
@media (min-width: 1280px)
2xl:adib. 2xl:text-lg
@media (min-width: 1536px)
Klasea
CSS
block
display: block
inline-block
display: inline-block
inline
display: inline
flex
display: flex
inline-flex
display: inline-flex
grid
display: grid
inline-grid
display: inline-grid
hidden
display: none
contents
display: contents
Klasea
CSS
static
position: static
fixed
position: fixed
absolute
position: absolute
relative
position: relative
sticky
position: sticky
inset-0
inset: 0
inset-x-0
left: 0; right: 0
inset-y-0
top: 0; bottom: 0
top-0
top: 0
right-0
right: 0
bottom-0
bottom: 0
left-0
left: 0
Klasea
CSS
flex-row
flex-direction: row
flex-col
flex-direction: column
flex-wrap
flex-wrap: wrap
flex-nowrap
flex-wrap: nowrap
flex-1
flex: 1 1 0%
flex-auto
flex: 1 1 auto
flex-none
flex: none
grow
flex-grow: 1
grow-0
flex-grow: 0
shrink
flex-shrink: 1
shrink-0
flex-shrink: 0
Klasea
CSS
grid-cols-1
grid-template-columns: repeat(1, minmax(0, 1fr))
grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr))
grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr))
grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr))
grid-cols-12
grid-template-columns: repeat(12, minmax(0, 1fr))
col-span-1
grid-column: span 1 / span 1
col-span-2
grid-column: span 2 / span 2
col-span-full
grid-column: 1 / -1
grid-rows-1
grid-template-rows: repeat(1, minmax(0, 1fr))
grid-rows-2
grid-template-rows: repeat(2, minmax(0, 1fr))
Klasea
CSS
justify-start
justify-content: flex-start
justify-center
justify-content: center
justify-end
justify-content: flex-end
justify-between
justify-content: space-between
justify-around
justify-content: space-around
justify-evenly
justify-content: space-evenly
items-start
align-items: flex-start
items-center
align-items: center
items-end
align-items: flex-end
items-baseline
align-items: baseline
items-stretch
align-items: stretch
self-auto
align-self: auto
self-start
align-self: flex-start
self-center
align-self: center
self-end
align-self: flex-end
Klasea
CSS
p-0
padding: 0
p-1
padding: 0.25rem (4px)
p-2
padding: 0.5rem (8px)
p-4
padding: 1rem (16px)
p-6
padding: 1.5rem (24px)
p-8
padding: 2rem (32px)
px-*
padding-left & padding-right
py-*
padding-top & padding-bottom
pt/pr/pb/pl-*
padding-[side]
m-0
margin: 0
m-1
margin: 0.25rem (4px)
m-2
margin: 0.5rem (8px)
m-4
margin: 1rem (16px)
m-auto
margin: auto
-m-1
margin: -0.25rem
mx-auto
margin-left: auto; margin-right: auto
gap-0
gap: 0
gap-1
gap: 0.25rem (4px)
gap-2
gap: 0.5rem (8px)
gap-4
gap: 1rem (16px)
gap-x-*
column-gap
gap-y-*
row-gap
Klasea
CSS
w-0
width: 0
w-1
width: 0.25rem (4px)
w-4
width: 1rem (16px)
w-full
width: 100%
w-screen
width: 100vw
w-auto
width: auto
w-1/2
width: 50%
w-1/3
width: 33.333%
w-fit
width: fit-content
min-w-0
min-width: 0
min-w-full
min-width: 100%
max-w-sm
max-width: 24rem (384px)
max-w-md
max-width: 28rem (448px)
max-w-lg
max-width: 32rem (512px)
max-w-xl
max-width: 36rem (576px)
max-w-2xl
max-width: 42rem (672px)
max-w-full
max-width: 100%
max-w-screen-sm
max-width: 640px
max-w-screen-md
max-width: 768px
max-w-screen-lg
max-width: 1024px
h-0
height: 0
h-4
height: 1rem (16px)
h-full
height: 100%
h-screen
height: 100vh
h-auto
height: auto
min-h-0
min-height: 0
min-h-full
min-height: 100%
min-h-screen
min-height: 100vh
size-4
width: 1rem; height: 1rem
size-6
width: 1.5rem; height: 1.5rem
size-full
width: 100%; height: 100%
Klasea
CSS
text-xs
font-size: 0.75rem (12px)
text-sm
font-size: 0.875rem (14px)
text-base
font-size: 1rem (16px)
text-lg
font-size: 1.125rem (18px)
text-xl
font-size: 1.25rem (20px)
text-2xl
font-size: 1.5rem (24px)
text-3xl
font-size: 1.875rem (30px)
text-4xl
font-size: 2.25rem (36px)
font-thin
font-weight: 100
font-light
font-weight: 300
font-normal
font-weight: 400
font-medium
font-weight: 500
font-semibold
font-weight: 600
font-bold
font-weight: 700
font-sans
font-family: ui-sans-serif, system-ui, sans-serif
font-serif
font-family: ui-serif, Georgia, serif
font-mono
font-family: ui-monospace, monospace
italic
font-style: italic
not-italic
font-style: normal
leading-none
line-height: 1
leading-tight
line-height: 1.25
leading-normal
line-height: 1.5
leading-relaxed
line-height: 1.625
leading-loose
line-height: 2
tracking-tight
letter-spacing: -0.025em
tracking-normal
letter-spacing: 0
tracking-wide
letter-spacing: 0.025em
Klasea
CSS
text-left
text-align: left
text-center
text-align: center
text-right
text-align: right
text-justify
text-align: justify
uppercase
text-transform: uppercase
lowercase
text-transform: lowercase
capitalize
text-transform: capitalize
normal-case
text-transform: none
underline
text-decoration: underline
line-through
text-decoration: line-through
no-underline
text-decoration: none
truncate
overflow: hidden; text-overflow: ellipsis; white-space: nowrap
text-ellipsis
text-overflow: ellipsis
text-clip
text-overflow: clip
whitespace-normal
white-space: normal
whitespace-nowrap
white-space: nowrap
whitespace-pre
white-space: pre
break-normal
word-break: normal
break-words
word-break: break-word
break-all
word-break: break-all
line-clamp-1
-webkit-line-clamp: 1
line-clamp-2
-webkit-line-clamp: 2
line-clamp-3
-webkit-line-clamp: 3
Klasea
CSS
bg-transparent
background-color: transparent
bg-current
background-color: currentColor
bg-white
background-color: #fff
bg-black
background-color: #000
bg-slate-500
background-color: #64748b
bg-[#hex]adib. bg-[#1da1f2]
background-color: #hex
bg-cover
background-size: cover
bg-contain
background-size: contain
bg-center
background-position: center
bg-no-repeat
background-repeat: no-repeat
bg-repeat
background-repeat: repeat
bg-fixed
background-attachment: fixed
bg-gradient-to-r
background-image: linear-gradient(to right, ...)
bg-gradient-to-b
background-image: linear-gradient(to bottom, ...)
from-blue-500
gradientearen hasierako kolorea
via-purple-500
gradientearen erdiko kolorea
to-pink-500
gradientearen amaierako kolorea
Klasea
CSS
border
border-width: 1px
border-0
border-width: 0
border-2
border-width: 2px
border-4
border-width: 4px
border-t
border-top-width: 1px
border-r
border-right-width: 1px
border-b
border-bottom-width: 1px
border-l
border-left-width: 1px
border-solid
border-style: solid
border-dashed
border-style: dashed
border-dotted
border-style: dotted
border-none
border-style: none
rounded
border-radius: 0.25rem (4px)
rounded-md
border-radius: 0.375rem (6px)
rounded-lg
border-radius: 0.5rem (8px)
rounded-xl
border-radius: 0.75rem (12px)
rounded-2xl
border-radius: 1rem (16px)
rounded-full
border-radius: 9999px
rounded-none
border-radius: 0
rounded-t-lg
border-top-left/right-radius: 0.5rem
divide-x
ertza haurren artean, horizontalean
divide-y
ertza haurren artean, bertikalean
Klasea
CSS
shadow-sm
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)
shadow
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1)
shadow-md
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)
shadow-lg
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
shadow-xl
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1)
shadow-2xl
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25)
shadow-inner
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05)
shadow-none
box-shadow: none
opacity-0
opacity: 0
opacity-50
opacity: 0.5
opacity-100
opacity: 1
blur
filter: blur(8px)
blur-sm
filter: blur(4px)
blur-lg
filter: blur(16px)
blur-none
filter: blur(0)
backdrop-blur
backdrop-filter: blur(8px)
backdrop-blur-sm
backdrop-filter: blur(4px)
Klasea
CSS
transition
transition: all 150ms ease
transition-none
transition: none
transition-colors
transition: color, background-color, border-color
transition-opacity
transition: opacity 150ms
transition-transform
transition: transform 150ms
duration-75
transition-duration: 75ms
duration-150
transition-duration: 150ms
duration-300
transition-duration: 300ms
duration-500
transition-duration: 500ms
ease-linear
transition-timing-function: linear
ease-in
transition-timing-function: ease-in
ease-out
transition-timing-function: ease-out
ease-in-out
transition-timing-function: ease-in-out
delay-150
transition-delay: 150ms
delay-300
transition-delay: 300ms
animate-spin
animation: spin 1s linear infinite
animate-ping
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
animate-pulse
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
animate-bounce
animation: bounce 1s infinite
Klasea
CSS
scale-0
transform: scale(0)
scale-50
transform: scale(0.5)
scale-100
transform: scale(1)
scale-150
transform: scale(1.5)
rotate-0
transform: rotate(0deg)
rotate-45
transform: rotate(45deg)
rotate-90
transform: rotate(90deg)
rotate-180
transform: rotate(180deg)
-rotate-45
transform: rotate(-45deg)
translate-x-0
transform: translateX(0)
translate-x-4
transform: translateX(1rem)
translate-x-full
transform: translateX(100%)
-translate-x-4
transform: translateX(-1rem)
translate-y-4
transform: translateY(1rem)
skew-x-3
transform: skewX(3deg)
skew-y-3
transform: skewY(3deg)
origin-center
transform-origin: center
origin-top
transform-origin: top
Klasea
CSS
cursor-pointer
cursor: pointer
cursor-default
cursor: default
cursor-not-allowed
cursor: not-allowed
cursor-wait
cursor: wait
cursor-grab
cursor: grab
pointer-events-none
pointer-events: none
pointer-events-auto
pointer-events: auto
select-none
user-select: none
select-text
user-select: text
select-all
user-select: all
resize
resize: both
resize-none
resize: none
resize-x
resize: horizontal
resize-y
resize: vertical
scroll-smooth
scroll-behavior: smooth
scroll-auto
scroll-behavior: auto
Klasea
CSS
hover:adib. hover:bg-blue-600
sagua gainetik pasatzean
focus:adib. focus:ring-2
fokua hartzean
focus-visible:adib. focus-visible:outline-none
teklatuarekin fokua hartzean
active:adib. active:bg-blue-700
sakatzean (aktibo)
disabled:adib. disabled:opacity-50
desgaituta dagoenean
first:adib. first:mt-0
lehen haurra
last:adib. last:mb-0
azken haurra
odd:adib. odd:bg-gray-100
haur bakoitiak
even:adib. even:bg-white
haur bikoitiak
group-hover:adib. group-hover:visible
sagua .group gurasoaren gainetik pasatzean
peer-focus:adib. peer-focus:ring
.peer anai-arrebak fokua duenean
dark:adib. dark:bg-gray-900
modu iluna
motion-safe:adib. motion-safe:animate-spin
erabiltzaileak animazioak onartzen baditu
motion-reduce:adib. motion-reduce:animate-none
erabiltzaileak mugimendu gutxiago nahi badu
Klasea
CSS
overflow-auto
overflow: auto
overflow-hidden
overflow: hidden
overflow-visible
overflow: visible
overflow-scroll
overflow: scroll
overflow-x-auto
overflow-x: auto
overflow-y-auto
overflow-y: auto
overflow-x-hidden
overflow-x: hidden
overflow-y-hidden
overflow-y: hidden
z-0
z-index: 0
z-10
z-index: 10
z-20
z-index: 20
z-30
z-index: 30
z-40
z-index: 40
z-50
z-index: 50
z-auto
z-index: auto
-z-10
z-index: -10
Aholkua: erabili balio arbitrarioak kortxete artean: w-[200px], text-[#1da1f2], grid-cols-[1fr_2fr]

Tresna honi buruz

Tailwind egunero erabili arren, erraz ahazten da justify-between edo items-center zen nahi zenuena, zenbat neurtzen duen p-6k edo zer egiten duen zehazki truncate-k. Laburpen honek gehien erabiltzen diren klaseak biltzen ditu, sortzen duten CSSarekin batera eta ataletan antolatuta: eten-puntuak, display, posizioa, flexbox, grid, lerrokatzea, tartea, tamaina, tipografia, atzeko planoak, ertzak, efektuak, trantsizioak, eraldaketak, elkarreragina eta egoerak.

Idatzi bilatzailean, eta zerrenda berehala iragazten da klasearen izenaren, CSS propietatearen edo adibidearen arabera; horrela, «gap», «flex-direction» edo «hover» bila ditzakezu. Atalen barrak bakarra ikusteko aukera ematen dizu, eta bloke bakoitza tolestu edo zabal dezakezu haren izenburua sakatuta. Lerro bakoitzeko botoiak klasea arbelera kopiatzen du, zure HTMLan edo JSXan zuzenean itsasteko.

Zure nabigatzailean dabilen erreferentzia estatikoa da, kanpoko zerbitzuekin konexiorik gabe. Klase ohikoenen hautaketa bat biltzen du, ez dokumentazio osoa, eta balioak Tailwinden konfigurazio lehenetsiari dagozkio; zure proiektuak gaia aldatzen badu (koloreak, tarteak, eten-puntuak), benetako balioak bestelakoak izan daitezke. Kasu zehatzetarako, erabili kortxete arteko balio arbitrarioak.

Ohiko galderak

Zenbat neurtzen du tarte-unitate bakoitzak Tailwinden?

Berez, unitate bakoitza 0,25rem da, hau da, 4 px 16 px-ko oinarrizko letrarekin. Horrela, p-4 1rem (16 px) da eta gap-2 0,5rem (8 px).

Nola erabili eskalan ez dagoen balio bat?

Kortxete arteko balio arbitrarioekin, adibidez w-[200px], text-[#1da1f2] edo grid-cols-[1fr_2fr]. Balioaren barruko zuriuneak azpimarrarekin idazten dira.

Zer esan nahi dute sm:, md: eta lg: aurrizkiek?

Eten-puntuen aurrizkiak dira, eta klasea gutxieneko zabalera batetik aurrera aplikatzen dute: 640, 768 eta 1024 px berez. Tailwind mobile first da; beraz, aurrizkirik gabeko klaseak tamaina guztietan aplikatzen dira.

Tailwind 3rako eta Tailwind 4rako balio du?

Laburpen honetako klase gehienak bi bertsioetan daude. Batzuek izena edo balioa aldatzen dute 4an, gradienteek edo itzal batzuek adibidez; zalantzarik baduzu, begiratu zure bertsioaren dokumentazioa.

Lotutako tresnak

HEX-a RGB bihurtuBihurtu kolore-kode hamaseitar bat RGB (eta beste formatu batzuetara) berehala.RGB-a HEX bihurtuBihurtu RGB balioak kode hamaseitar, CSSan, diseinuan edo markan erabiltzeko.HSL bihurgailuaPasatu koloreak HSLtik HEX edo RGBra eta alderantziz, kolorearen aurrebistarekin.Kodetzailea eta deskodetzaileaKodetu eta deskodetu Base64, URL eta HTML entitateak, eta sortu MD5 eta SHA hashak.SHA hash sortzaileaKalkulatu edozein testuren SHA-1, SHA-256, SHA-512 edo MD5 hasha zure nabigatzailean.Adierazpen erregularren probatzaileaProbatu zure adierazpen erregularrak denbora errealean eta ikusi zer bat datorren eta zer talde harrapatzen dituen.