Warna di Tailwind CSS
1. Palet Warna Bawaan
Tailwind sudah menyediakan banyak pilihan warna yang bisa langsung digunakan. Warna-warna ini dikelompokkan berdasarkan tingkat kecerahannya, dari 50 (paling terang) sampai 950 (paling gelap).
Contoh penggunaan warna sky dengan berbagai tingkat:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Warna Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-2xl font-bold text-center my-6">Contoh Gradasi Warna bg-sky</h1>
<div class="space-y-1">
<div class="bg-sky-50 h-10 w-full"></div>
<div class="bg-sky-100 h-10 w-full"></div>
<div class="bg-sky-200 h-10 w-full"></div>
<div class="bg-sky-300 h-10 w-full"></div>
<div class="bg-sky-400 h-10 w-full"></div>
<div class="bg-sky-500 h-10 w-full"></div>
<div class="bg-sky-600 h-10 w-full"></div>
<div class="bg-sky-700 h-10 w-full"></div>
<div class="bg-sky-800 h-10 w-full"></div>
<div class="bg-sky-900 h-10 w-full"></div>
<div class="bg-sky-950 h-10 w-full"></div>
</div>
</body>
</html>
berikut hasilnya:
2. Menggunakan Utility Warna
Tailwind menyediakan class-class untuk mengatur warna seperti:
|
Utility |
Fungsi |
|
bg-* |
Warna latar belakang |
|
text-* |
Warna teks |
|
border-* |
Warna border |
|
fill-* |
Warna isi SVG |
|
stroke-* |
Warna garis SVG |
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Warna Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex items-center gap-4 rounded-lg bg-white p-6 shadow-md outline outline-black/5 dark:bg-gray-800">
<span
class="inline-flex shrink-0 rounded-full border border-pink-300 bg-pink-100 p-2 dark:border-pink-300/10 dark:bg-pink-400/10">
<svg class="size-6 stroke-pink-700 dark:stroke-pink-500" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" stroke-width="2" />
</svg>
</span>
<div>
<p class="text-gray-700 dark:text-gray-400">
<span class="font-medium text-gray-950 dark:text-white">Tom Watson</span> mentioned you in
<span class="font-medium text-gray-950 dark:text-white">Logo redesign</span>
</p>
<time class="mt-1 block text-gray-500" datetime="9:37">9:37am</time>
</div>
</div>
</body>
</html>
berikut haslnya:
3. Mengatur Opacity Warna
Kamu bisa mengatur transparansi warna menggunakan format seperti bg-color/opacity. Contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Warna Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>
<div class="bg-sky-500/10 h-10 w-full"></div>
<div class="bg-sky-500/20 h-10 w-full"></div>
<div class="bg-sky-500/30 h-10 w-full"></div>
<div class="bg-sky-500/40 h-10 w-full"></div>
<div class="bg-sky-500/50 h-10 w-full"></div>
<div class="bg-sky-500/60 h-10 w-full"></div>
<div class="bg-sky-500/70 h-10 w-full"></div>
<div class="bg-sky-500/80 h-10 w-full"></div>
<div class="bg-sky-500/90 h-10 w-full"></div>
<div class="bg-sky-500/100 h-10 w-full"></div>
</div>
</body>
</html>
berikut hasilnya:
4. Mode Gelap (Dark Mode)
Tailwind punya fitur dark mode yang bisa diaktifkan dengan class dark:. Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contoh Warna Tailwind</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
<div>
<span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
<svg class="h-6 w-6 stroke-white" viewBox="0 0 24 24" fill="none">
<path d="M5 13l4 4L19 7" stroke-width="2" />
</svg>
</span>
</div>
<h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight">
Writes upside-down
</h3>
<p class="text-gray-500 dark:text-gray-400 mt-2 text-sm">
The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer
space.
</p>
</div>
</body>
</html>
berikut hasilnya:
5. Menggunakan Warna di File CSS
Tailwind menyediakan warna dalam bentuk CSS Variable, seperti --color-blue-500, jadi kamu bisa pakai di file .css sendiri:
@import "tailwindcss";
@layer components {
.typography {
color: var(--color-gray-950);
a {
color: var(--color-blue-500);
&:hover {
color: var(--color-blue-800);
}
}
}
}
Atau langsung di HTML dengan class arbitrary value:
<div class="bg-[light-dark(var(--color-white),var(--color-gray-950))]">
<!-- Konten -->
</div>
Jika mau atur opacity juga, bisa pakai fungsi --alpha():
@import "tailwindcss";
@layer components {
.DocSearch-Hit--Result {
background-color: --alpha(var(--color-gray-950) / 10%);
}
}
Artikel Lainnya Dengan Kategori Terkait :
1. Belajar Tailwind CSS #01 Instalasi Tailwind CSS
2. Belajar Tailwind CSS #02 Editor Setup di Tailwind CSS
3. Belajar Tailwind CSS #03 Compatibility di Tailwind CSS
4. Belajar Tailwind CSS #04 Upgrade dari Tailwind CSS v3 ke v4
5. Belajar Tailwind CSS #05 Perubahan di Tailwind CSS v4 dengan v3
6. Belajar Tailwind CSS #06 Styling dengan Utility Classes part 1
7. Belajar Tailwind CSS #07 Styling dengan Utility Classes part 2
8. Belajar Tailwind CSS #08 Hover, fokus dan status lainnya part 1
9. Belajar Tailwind CSS #09 Hover, fokus, dan status lainnya part 2
10. Belajar Tailwind CSS #10 Hover, fokus, dan status lainnya part 3
11. Belajar Tailwind CSS #11 Hover, fokus, dan status lainnya part 4
12. Belajar Tailwind CSS #12 Hover, fokus, dan status lainnya part 5
13. Belajar Tailwind CSS #13 Responsive design part 1
14. Belajar Tailwind CSS #14 Responsive design part 2
15. Belajar tailwind CSS #15 Responsive design part 3
16. Belajar Tailwind CSS #16 Dark Mode di Tailwind
17. Belajar Tailwind CSS #17 Theme Variables part 1
18. Belajar Tailwind CSS #18 Theme Variables part 2
19. Belajar Tailwind CSS #19 Theme Variables part 3
20. Belajar Tailwind CSS #20 Tailwind CSS - Colors part 1
21. Belajar Tailwind CSS #21 Tailwind - Colors part 2
22. Belajar Tailwind CSS #22 Adding custom styles part 1
23. Belajar Tailwind CSS #23 Adding custom styles part 2
24. Belajar Tailwind CSS #24 Adding custom styles part 3
25. Belajar Tailwind CSS #25 Detecting classes in soure files
26. Belajar Tailwind CSS #26 Functions and directives
27. Belajar Tailwind CSS #27 Preflight Tailwind CSS
28. Belajar Tailwind CSS #28 Aspect-Ratio Tailwind CSS
29. Belajar Tailwind CSS #29 Tailwind CSS columns
30. Belajar Tailwind CSS #30 Tailwind CSS Break-After
31. Belajar Tailwind CSS #31 Tailwind CSS Break-Before
32. Belajar Tailwind CSS #32 Break-Inside Tailwind CSS
33. Belajar Tailwind CSS #33 Box Decoration Break Tailwind CSS
34. Belajar Tailwind CSS #34 Box Sizing Tailwind CSS
35. Belajar Tailwind CSS #35 Tailwind CSS Display
36. Belajar Tailwind CSS #36 Tailwind CSS Float
37. Belajar tailwind CSS #37 Tailwind CSS Clear
38. Belajar Tailwind CSS #38 Tailwind CSS Isolation
39. Belajar Tailwind CSS #39 Tailwind CSS Object-fit
40. Belajar Tailwind CSS #40 Tailwind CSS Object-position
41. Belajar Tailwind CSS #41 Overflow Tailwind CSS
42. Belajar Tailwind CSS #42 Tailwind CSS overscroll-behavior
43. Belajar Tailwind CSS #43 Tailwind CSS Position
44. Belajar Tailwind CSS #44 Tailwind CSS top,right,bottom,left
45. Belajar Tailwind CSS #45 Visibility di Tailwind CSS
46. Belajar Tailwind CSS #46 Z-index di Tailwind CSS
47. Belajar Tailwind CSS #47 Tailwind CSS flex-basis
48. Belajar Tailwind CSS #48 Flex-direction Tailwind CSS
49. Belajar Tailwind CSS #49 Flex-wrap Tailwind CSS
50. Belajar Tailwind CSS #50 Flex Tailwind CSS
51. Belajar Tailwind CSS #51 Flex-grow Tailwind CSS
52. Belajar Tailwind CSS #52 Flex-shrink Tailwind CSS
53. Belajar Tailwind CSS #53 Tailwind CSS order
54. Belajar Tailwind CSS #54 Grid-template-columns Tailwind CSS
55. Belajar Tailwind CSS #55 Grid-column Tailwind CSS
56. Belajar Tailwind CSS #56 Grid-template-rows Tailwind CSS
57. Belajar Tailwind CSS #57 Grid-row Tailwind CSS
58. Belajar Tailwind CSS #58 Grid-auto-flow Tailwind CSS
59. Belajar Tailwind CSS #59 Grid-auto-columns Tailwind CSS
60. Belajar Tailwind CSS #60 Grid-auto-rows Tailwind CSS
61. Belajar Tailwind CSS #61 Gap di Tailwind CSS
62. Belajar Tailwind CSS #62 Justify-content di Tailwind CSS
63. Belajar Tailwind CSS #63 Justify-items di Tailwind CSS
64. Belajar Tailwind CSS #64 Justify-self di Tailwind CSS
65. Belajar Tailwind CSS #65 Align-content di Tailwind CSS
66. Belajar Tailwind CSS #66 Align-items di Tailwind CSS
67. Belajar Tailwind CSS #67 Align-self di Tailwind CSS
68. Belajar Tailwind CSS #68 Place-content di Tailwind CSS
