1. @import
Penjelasan Singkat:
Digunakan untuk mengimpor file CSS lain, termasuk file Tailwind itu sendiri.
Contoh:
@import "tailwindcss";
Ini artinya kamu memasukkan seluruh Tailwind ke dalam file CSS-mu.
2. @theme
Penjelasan Singkat:
Digunakan untuk mendefinisikan warna, font, ukuran, dan sebagainya yang bisa kamu pakai di seluruh proyek.
Contoh:
@theme {
--font-display: "Satoshi", "sans-serif";
--color-avocado-500: oklch(0.84 0.18 117.33);
}
Full HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@theme {
--font-display: "Satoshi", "sans-serif";
--color-avocado-500: oklch(0.84 0.18 117.33);
}
</style>
</head>
<body class="font-[var(--font-display)] bg-[oklch(0.84_0.18_117.33)] text-white h-screen flex items-center justify-center">
<h1 class="text-3xl">Warna Avocado</h1>
</body>
</html>
berikut hasilnya:
3. @source
Penjelasan Singkat:
Kalau Tailwind gak bisa otomatis mendeteksi semua file HTML/JS kamu, kamu bisa bantu dia dengan directive ini.
@source "../node_modules/@my-company/ui-lib";
Biasanya dipakai di proyek besar atau jika kamu pakai UI library buatan sendiri.
4. @utility
Penjelasan Singkat:
Membuat class utility baru sendiri yang bisa dipakai seperti hover:bg-red-500, dsb.
@utility tab-4 {
tab-size: 4;
}
Setelah kamu bikin ini, kamu bisa pakai di HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="tab-4">Teks ini pakai tab-size 4</div>
</body>
</html>
berikut hasilnya:
5. @variant
Penjelasan Singkat:
Menambahkan varian seperti dark: atau hover: ke CSS buatan sendiri.
Contoh:
.my-element {
background: white;
@variant dark {
background: black;
}
}
6. @custom-variant
Penjelasan Singkat:
Bikin varian khusus sendiri, misalnya berdasarkan data-theme.
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
Lalu kamu bisa pakai di HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body>
<div data-theme="midnight" class="theme-midnight:bg-black theme-midnight:text-white">Contoh</div>
</body>
</html>
berikut hasilnya:
7. @apply
Penjelasan Singkat:
Digunakan untuk menyalin utility Tailwind ke dalam file CSS biasa.
Contoh:
.btn {
@apply bg-blue-500 text-white px-4 py-2 rounded;
}
Full HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-10">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded shadow">
Klik Saya
</button>
</body>
</html>
berikut hasilnya:
8. @reference
Penjelasan Singkat:
Kalau kamu pakai Vue/Svelte/React dan pakai <style> terpisah, directive ini dipakai supaya bisa akses @apply, @variant, dll tanpa duplikasi CSS.
<style>
@reference "tailwindcss";
h1 {
@apply text-2xl font-bold text-red-500;
}
</style>
9. --alpha()
Penjelasan Singkat:
Fungsi untuk mengatur tingkat transparansi/opacity warna.
.my-element {
color: --alpha(var(--color-lime-300) / 50%);
}
Hasilnya warna lime 50% transparan.
10. --spacing()
Penjelasan Singkat:
Fungsi untuk menghasilkan nilai spacing sesuai skala Tailwind.
.my-element {
margin: --spacing(4);
}
Artinya: margin: calc(var(--spacing) * 4);
Contoh HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="app.css">
</head>
<body class="p-5">
<div class="py-[calc(--spacing(4)-1px)]">
Konten dengan padding atas bawah sesuai spacing
</div>
</body>
</html>
berikut hasilnya:
11. @config dan @plugin (Legacy Tailwind v3.x)
Penjelasan Singkat:
Kalau kamu masih pakai Tailwind versi lama dan config-nya di file tailwind.config.js, kamu bisa:
@config "../../tailwind.config.js";
@plugin "@tailwindcss/typography";
Tapi kalau kamu sudah pakai Tailwind versi 4 atau lebih, ini tidak terlalu dibutuhkan lagi.
12. theme() (Legacy function)
Penjelasan Singkat:
Fungsi ini dipakai untuk mengakses value tema Tailwind dari CSS biasa (versi 3.x).
.my-element {
margin: theme(spacing.12);
}
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
