Tailwind CSS Cheatsheet – Utility Classes & Layout Paling Sering Digunakan

#1 container

Membuat container responsive

#2 box-border

Mengatur box-sizing: border-box

#3 box-content

Mengatur box-sizing: content-box

#4 block

Display block

#5 inline-block

Display inline-block

#6 inline

Display inline

#7 flex

Display flex

#8 inline-flex

Display inline-flex

#9 grid

Display grid

#10 inline-grid

Display inline-grid

#11 hidden

Menyembunyikan elemen

#12 visible

Menampilkan elemen

#13 float-right

Float kanan

#14 float-left

Float kiri

#15 float-none

Tidak ada float

#16 clear-left

Clear float kiri

#17 clear-right

Clear float kanan

#18 clear-both

Clear float semua

#19 clearfix

Membuat clearfix utility

#20 m-0

Margin semua sisi 0

#21 m-1

Margin semua sisi 0.25rem

#22 m-2

Margin semua sisi 0.5rem

#23 m-3

Margin semua sisi 0.75rem

#24 m-4

Margin semua sisi 1rem

#25 m-5

Margin semua sisi 1.25rem

#26 m-6

Margin semua sisi 1.5rem

#27 mt-0

Margin top 0

#28 mt-1

Margin top 0.25rem

#29 mt-2

Margin top 0.5rem

#30 mt-3

Margin top 0.75rem

#31 mt-4

Margin top 1rem

#32 mb-0

Margin bottom 0

#33 mb-1

Margin bottom 0.25rem

#34 mb-2

Margin bottom 0.5rem

#35 mb-3

Margin bottom 0.75rem

#36 mb-4

Margin bottom 1rem

#37 ml-0

Margin left 0

#38 ml-1

Margin left 0.25rem

#39 ml-2

Margin left 0.5rem

#40 ml-3

Margin left 0.75rem

#41 ml-4

Margin left 1rem

#42 mr-0

Margin right 0

#43 mr-1

Margin right 0.25rem

#44 mr-2

Margin right 0.5rem

#45 mr-3

Margin right 0.75rem

#46 mr-4

Margin right 1rem

#47 p-0

Padding semua sisi 0

#48 p-1

Padding semua sisi 0.25rem

#49 p-2

Padding semua sisi 0.5rem

#50 p-3

Padding semua sisi 0.75rem

#51 p-4

Padding semua sisi 1rem

#52 p-5

Padding semua sisi 1.25rem

#53 p-6

Padding semua sisi 1.5rem

#54 pt-0

Padding top 0

#55 pt-1

Padding top 0.25rem

#56 pt-2

Padding top 0.5rem

#57 pt-3

Padding top 0.75rem

#58 pt-4

Padding top 1rem

#59 pb-0

Padding bottom 0

#60 pb-1

Padding bottom 0.25rem

#61 pb-2

Padding bottom 0.5rem

#62 pb-3

Padding bottom 0.75rem

#63 pb-4

Padding bottom 1rem

#64 pl-0

Padding left 0

#65 pl-1

Padding left 0.25rem

#66 pl-2

Padding left 0.5rem

#67 pl-3

Padding left 0.75rem

#68 pl-4

Padding left 1rem

#69 pr-0

Padding right 0

#70 pr-1

Padding right 0.25rem

#71 pr-2

Padding right 0.5rem

#72 pr-3

Padding right 0.75rem

#73 pr-4

Padding right 1rem

#74 gap-0

Jarak grid/flex 0

#75 gap-1

Jarak grid/flex 0.25rem

#76 gap-2

Jarak grid/flex 0.5rem

#77 gap-3

Jarak grid/flex 0.75rem

#78 gap-4

Jarak grid/flex 1rem

#79 gap-x-0

Jarak horizontal 0

#80 gap-x-1

Jarak horizontal 0.25rem

#81 gap-x-2

Jarak horizontal 0.5rem

#82 gap-y-0

Jarak vertikal 0

#83 gap-y-1

Jarak vertikal 0.25rem

#84 gap-y-2

Jarak vertikal 0.5rem

#85 w-0

Width 0

#86 w-1

Width 0.25rem

#87 w-2

Width 0.5rem

#88 w-3

Width 0.75rem

#89 w-4

Width 1rem

#90 w-5

Width 1.25rem

#91 w-6

Width 1.5rem

#92 w-full

Width 100%

#93 h-0

Height 0

#94 h-1

Height 0.25rem

#95 h-2

Height 0.5rem

#96 h-3

Height 0.75rem

#97 h-4

Height 1rem

#98 h-5

Height 1.25rem

#99 h-6

Height 1.5rem

#100 h-full

Height 100%

#101 min-w-0

Minimum width 0

#102 min-w-full

Minimum width 100%

#103 max-w-xs

Maximum width xs

#104 max-w-sm

Maximum width sm

#105 max-w-md

Maximum width md

#106 max-w-lg

Maximum width lg

#107 max-w-xl

Maximum width xl

#108 max-w-2xl

Maximum width 2xl

#109 max-w-3xl

Maximum width 3xl

#110 max-w-4xl

Maximum width 4xl

#111 max-w-5xl

Maximum width 5xl

#112 max-w-6xl

Maximum width 6xl

#113 max-w-full

Maximum width 100%

#114 text-xs

Ukuran font xs

#115 text-sm

Ukuran font sm

#116 text-base

Ukuran font base

#117 text-lg

Ukuran font lg

#118 text-xl

Ukuran font xl

#119 text-2xl

Ukuran font 2xl

#120 text-3xl

Ukuran font 3xl

#121 text-4xl

Ukuran font 4xl

#122 text-5xl

Ukuran font 5xl

#123 text-6xl

Ukuran font 6xl

#124 font-sans

Font family sans

#125 font-serif

Font family serif

#126 font-mono

Font family monospace

#127 font-thin

Font weight thin

#128 font-extralight

Font weight extra light

#129 font-light

Font weight light

#130 font-normal

Font weight normal

#131 font-medium

Font weight medium

#132 font-semibold

Font weight semibold

#133 font-bold

Font weight bold

#134 font-extrabold

Font weight extra bold

#135 font-black

Font weight black

#136 leading-none

Line-height none

#137 leading-tight

Line-height tight

#138 leading-snug

Line-height snug

#139 leading-normal

Line-height normal

#140 leading-relaxed

Line-height relaxed

#141 leading-loose

Line-height loose

#142 tracking-tighter

Letter-spacing tighter

#143 tracking-tight

Letter-spacing tight

#144 tracking-normal

Letter-spacing normal

#145 tracking-wide

Letter-spacing wide

#146 tracking-wider

Letter-spacing wider

#147 tracking-widest

Letter-spacing widest

#148 text-left

Text align left

#149 text-center

Text align center

#150 text-right

Text align right

#151 text-justify

Text align justify

#152 text-transparent

Text color transparent

#153 text-black

Text color black

#154 text-white

Text color white

#155 text-gray-50

Text color gray-50

#156 text-gray-100

Text color gray-100

#157 text-gray-200

Text color gray-200

#158 text-gray-300

Text color gray-300

#159 text-gray-400

Text color gray-400

#160 text-gray-500

Text color gray-500

#161 text-gray-600

Text color gray-600

#162 text-gray-700

Text color gray-700

#163 text-gray-800

Text color gray-800

#164 text-gray-900

Text color gray-900

#165 text-red-50

Text color red-50

#166 text-red-100

Text color red-100

#167 bg-transparent

Background transparan

#168 bg-black

Background hitam

#169 bg-white

Background putih

#170 bg-gray-50

Background abu-abu 50

#171 bg-gray-100

Background abu-abu 100

#172 bg-gray-200

Background abu-abu 200

#173 bg-gray-300

Background abu-abu 300

#174 bg-gray-400

Background abu-abu 400

#175 bg-gray-500

Background abu-abu 500

#176 bg-gray-600

Background abu-abu 600

#177 bg-gray-700

Background abu-abu 700

#178 bg-gray-800

Background abu-abu 800

#179 bg-gray-900

Background abu-abu 900

#180 bg-red-50

Background merah 50

#181 bg-red-100

Background merah 100

#182 bg-red-200

Background merah 200

#183 bg-red-300

Background merah 300

#184 bg-red-400

Background merah 400

#185 bg-red-500

Background merah 500

#186 bg-red-600

Background merah 600

#187 bg-red-700

Background merah 700

#188 bg-red-800

Background merah 800

#189 bg-red-900

Background merah 900

#190 bg-green-50

Background hijau 50

#191 bg-green-100

Background hijau 100

#192 bg-green-200

Background hijau 200

#193 bg-green-300

Background hijau 300

#194 bg-green-400

Background hijau 400

#195 bg-green-500

Background hijau 500

#196 bg-green-600

Background hijau 600

#197 bg-green-700

Background hijau 700

#198 bg-green-800

Background hijau 800

#199 bg-green-900

Background hijau 900

#200 bg-blue-50

Background biru 50

#201 bg-blue-100

Background biru 100

#202 bg-blue-200

Background biru 200

#203 bg-blue-300

Background biru 300

#204 bg-blue-400

Background biru 400

#205 bg-blue-500

Background biru 500

#206 bg-blue-600

Background biru 600

#207 bg-blue-700

Background biru 700

#208 bg-blue-800

Background biru 800

#209 bg-blue-900

Background biru 900

#210 bg-opacity-0

Opacity background 0%

#211 bg-opacity-25

Opacity background 25%

#212 bg-opacity-50

Opacity background 50%

#213 bg-opacity-75

Opacity background 75%

#214 bg-opacity-100

Opacity background 100%

#215 border

Menambahkan border 1px solid

#216 border-0

Border 0

#217 border-2

Border 2px

#218 border-4

Border 4px

#219 border-8

Border 8px

#220 border-t

Border top

#221 border-b

Border bottom

#222 border-l

Border left

#223 border-r

Border right

#224 border-solid

Border solid

#225 border-dashed

Border dashed

#226 border-dotted

Border dotted

#227 border-none

Border none

#228 border-transparent

Border transparan

#229 border-black

Border hitam

#230 border-white

Border putih

#231 border-gray-50

Border abu-abu 50

#232 border-gray-100

Border abu-abu 100

#233 border-gray-200

Border abu-abu 200

#234 border-gray-300

Border abu-abu 300

#235 border-gray-400

Border abu-abu 400

#236 border-gray-500

Border abu-abu 500

#237 border-gray-600

Border abu-abu 600

#238 border-gray-700

Border abu-abu 700

#239 border-gray-800

Border abu-abu 800

#240 border-gray-900

Border abu-abu 900

#241 rounded-none

Border-radius 0

#242 rounded-sm

Border-radius kecil

#243 rounded

Border-radius default

#244 rounded-md

Border-radius medium

#245 rounded-lg

Border-radius besar

#246 rounded-xl

Border-radius extra large

#247 rounded-2xl

Border-radius 2xl

#248 rounded-3xl

Border-radius 3xl

#249 rounded-full

Border-radius penuh

#250 shadow

Shadow default

#251 shadow-sm

Shadow kecil

#252 shadow-md

Shadow medium

#253 shadow-lg

Shadow besar

#254 shadow-xl

Shadow extra large

#255 shadow-2xl

Shadow 2xl

#256 shadow-inner

Shadow dalam

#257 shadow-none

Tanpa shadow

#258 opacity-0

Opacity 0%

#259 opacity-25

Opacity 25%

#260 opacity-50

Opacity 50%

#261 opacity-75

Opacity 75%

#262 opacity-100

Opacity 100%

#263 flex-row

Flex direction row

#264 flex-row-reverse

Flex direction row-reverse

#265 flex-col

Flex direction column

#266 flex-col-reverse

Flex direction column-reverse

#267 flex-wrap

Flex wrap

#268 flex-wrap-reverse

Flex wrap reverse

#269 flex-nowrap

Flex nowrap

#270 items-start

Align items start

#271 items-center

Align items center

#272 items-end

Align items end

#273 items-baseline

Align items baseline

#274 items-stretch

Align items stretch

#275 justify-start

Justify content start

#276 justify-center

Justify content center

#277 justify-end

Justify content end

#278 justify-between

Justify content between

#279 justify-around

Justify content around

#280 justify-evenly

Justify content evenly

#281 content-start

Align content start

#282 content-center

Align content center

#283 content-end

Align content end

#284 content-between

Align content between

#285 content-around

Align content around

#286 content-evenly

Align content evenly

#287 gap-0

Gap 0

#288 gap-1

Gap 0.25rem

#289 gap-2

Gap 0.5rem

#290 gap-3

Gap 0.75rem

#291 gap-4

Gap 1rem

#292 gap-5

Gap 1.25rem

#293 gap-6

Gap 1.5rem

#294 grid-cols-1

Grid 1 kolom

#295 grid-cols-2

Grid 2 kolom

#296 grid-cols-3

Grid 3 kolom

#297 grid-cols-4

Grid 4 kolom

#298 grid-cols-5

Grid 5 kolom

#299 grid-cols-6

Grid 6 kolom

#300 grid-cols-7

Grid 7 kolom

#301 grid-cols-8

Grid 8 kolom

#302 grid-cols-9

Grid 9 kolom

#303 grid-cols-10

Grid 10 kolom

#304 grid-cols-11

Grid 11 kolom

#305 grid-cols-12

Grid 12 kolom

#306 grid-rows-1

Grid 1 baris

#307 grid-rows-2

Grid 2 baris

#308 grid-rows-3

Grid 3 baris

#309 grid-rows-4

Grid 4 baris

#310 grid-rows-5

Grid 5 baris

#311 grid-rows-6

Grid 6 baris

#312 grid-flow-row

Grid flow row

#313 grid-flow-col

Grid flow column

#314 grid-flow-row-dense

Grid flow row dense

#315 grid-flow-col-dense

Grid flow col dense

#316 order-1

Order 1

#317 order-2

Order 2

#318 order-3

Order 3

#319 order-4

Order 4

#320 order-5

Order 5

#321 order-6

Order 6

#322 order-7

Order 7

#323 order-8

Order 8

#324 order-9

Order 9

#325 order-10

Order 10

#326 order-11

Order 11

#327 order-12

Order 12

#328 translate-x-0

Translate X 0

#329 translate-x-1

Translate X 0.25rem

#330 translate-x-2

Translate X 0.5rem

#331 translate-x-3

Translate X 0.75rem

#332 translate-x-4

Translate X 1rem

#333 translate-x-5

Translate X 1.25rem

#334 translate-x-6

Translate X 1.5rem

#335 translate-y-0

Translate Y 0

#336 translate-y-1

Translate Y 0.25rem

#337 translate-y-2

Translate Y 0.5rem

#338 translate-y-3

Translate Y 0.75rem

#339 translate-y-4

Translate Y 1rem

#340 translate-y-5

Translate Y 1.25rem

#341 translate-y-6

Translate Y 1.5rem

#342 scale-0

Scale 0%

#343 scale-50

Scale 50%

#344 scale-75

Scale 75%

#345 scale-90

Scale 90%

#346 scale-95

Scale 95%

#347 scale-100

Scale 100%

#348 scale-105

Scale 105%

#349 scale-110

Scale 110%

#350 scale-125

Scale 125%

#351 scale-150

Scale 150%

#352 rotate-0

Rotate 0deg

#353 rotate-1

Rotate 1deg

#354 rotate-2

Rotate 2deg

#355 rotate-3

Rotate 3deg

#356 rotate-6

Rotate 6deg

#357 rotate-12

Rotate 12deg

#358 rotate-45

Rotate 45deg

#359 rotate-90

Rotate 90deg

#360 rotate-180

Rotate 180deg

#361 skew-x-0

Skew X 0deg

#362 skew-x-3

Skew X 3deg

#363 skew-x-6

Skew X 6deg

#364 skew-x-12

Skew X 12deg

#365 skew-y-0

Skew Y 0deg

#366 skew-y-3

Skew Y 3deg

#367 skew-y-6

Skew Y 6deg

#368 skew-y-12

Skew Y 12deg

#369 transition

Menambahkan transition default

#370 transition-none

Tanpa transition

#371 transition-all

Transition semua property

#372 transition-colors

Transition warna

#373 transition-opacity

Transition opacity

#374 transition-shadow

Transition shadow

#375 transition-transform

Transition transform

#376 duration-75

Durasi transition 75ms

#377 duration-100

Durasi transition 100ms

#378 duration-150

Durasi transition 150ms

#379 duration-200

Durasi transition 200ms

#380 duration-300

Durasi transition 300ms

#381 duration-500

Durasi transition 500ms

#382 duration-700

Durasi transition 700ms

#383 duration-1000

Durasi transition 1000ms

#384 ease-linear

Timing function linear

#385 ease-in

Timing function ease-in

#386 ease-out

Timing function ease-out

#387 ease-in-out

Timing function ease-in-out

#388 animate-none

Tanpa animasi

#389 animate-spin

Animasi spin

#390 animate-ping

Animasi ping

#391 animate-pulse

Animasi pulse

#392 animate-bounce

Animasi bounce

#393 filter

Aktifkan filter

#394 filter-none

Tanpa filter

#395 blur-none

Blur 0

#396 blur-sm

Blur kecil

#397 blur

Blur default

#398 blur-md

Blur medium

#399 blur-lg

Blur besar

#400 blur-xl

Blur extra large

#401 brightness-0

Brightness 0%

#402 brightness-50

Brightness 50%

#403 brightness-75

Brightness 75%

#404 brightness-90

Brightness 90%

#405 brightness-95

Brightness 95%

#406 brightness-100

Brightness 100%

#407 brightness-105

Brightness 105%

#408 brightness-110

Brightness 110%

#409 brightness-125

Brightness 125%

#410 brightness-150

Brightness 150%

#411 contrast-0

Contrast 0%

#412 contrast-50

Contrast 50%

#413 contrast-75

Contrast 75%

#414 contrast-100

Contrast 100%

#415 contrast-125

Contrast 125%

#416 contrast-150

Contrast 150%

#417 grayscale

Grayscale 100%

#418 grayscale-0

Grayscale 0%

#419 invert

Invert 100%

#420 invert-0

Invert 0%

#421 saturate-0

Saturate 0%

#422 saturate-50

Saturate 50%

#423 saturate-100

Saturate 100%

#424 saturate-150

Saturate 150%

#425 saturate-200

Saturate 200%

#426 sepia

Sepia 100%

#427 sepia-0

Sepia 0%

#428 mix-blend-normal

Blend mode normal

#429 mix-blend-multiply

Blend mode multiply

#430 mix-blend-screen

Blend mode screen

#431 mix-blend-overlay

Blend mode overlay

#432 mix-blend-darken

Blend mode darken

#433 mix-blend-lighten

Blend mode lighten

#434 mix-blend-color-dodge

Blend mode color dodge

#435 mix-blend-color-burn

Blend mode color burn

#436 mix-blend-hard-light

Blend mode hard light

#437 mix-blend-soft-light

Blend mode soft light

#438 mix-blend-difference

Blend mode difference

#439 mix-blend-exclusion

Blend mode exclusion

#440 mix-blend-hue

Blend mode hue

#441 mix-blend-saturation

Blend mode saturation

#442 mix-blend-color

Blend mode color

#443 mix-blend-luminosity

Blend mode luminosity

#444 hover:bg-gray-100

Background abu-abu 100 saat hover

#445 hover:text-blue-500

Text biru 500 saat hover

#446 focus:outline-none

Menghilangkan outline saat focus

#447 focus:ring-2

Menambahkan ring 2px saat focus

#448 active:bg-gray-200

Background abu-abu 200 saat active

#449 disabled:opacity-50

Opacity 50% saat disabled

#450 sm:text-sm

Ukuran font sm di screen ≥640px

#451 md:text-base

Ukuran font base di screen ≥768px

#452 lg:text-lg

Ukuran font lg di screen ≥1024px

#453 xl:text-xl

Ukuran font xl di screen ≥1280px

#454 2xl:text-2xl

Ukuran font 2xl di screen ≥1536px

Tailwind CSS Cheatsheet – Utility Classes & Layout Paling Sering Digunakan

Useful links

Company

Newsletter