{"id":16261,"date":"2022-06-04T07:22:01","date_gmt":"2022-06-04T07:22:01","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=16261"},"modified":"2022-06-04T08:13:05","modified_gmt":"2022-06-04T08:13:05","slug":"mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya","title":{"rendered":"Mengenal Apa Itu Tailwind CSS, Mengapa Menggunakannya dan Contohnya"},"content":{"rendered":"

Saat membuat kode aplikasi dari awal ingin itu mencerminkan merek unik, responsif pada perangkat apa pun, dan mudah untuk menulis dan memelihara dan itu mungkin hanya beberapa item di daftar sesuai keinginan.<\/p>\n

Dengan membangun dengan Tailwind CSS dapat mencentang item ini dari daftar. Tailwind CSS adalah kerangka kerja untuk membangun dan menyesuaikan aplikasi dengan cepat tanpa menulis CSS khusus.<\/p>\n

Apa itu Tailwind CSS?<\/strong><\/h2>\n

Tailwind CSS adalah framework CSS utilitas-pertama yang dirancang untuk memungkinkan pengguna membuat aplikasi lebih cepat dan lebih mudah.\u00a0Dapat menggunakan kelas utilitas untuk mengontrol tata letak, warna, spasi, tipografi, bayangan, dan lainnya untuk membuat desain komponen yang sepenuhnya disesuaikan tanpa meninggalkan HTML atau menulis satu baris CSS kustom.<\/p>\n

Misalnya, katakanlah ingin membuat tombol yang memiliki tinggi tetap, bantalan horizontal, warna latar hitam, tepi membulat, dan font putih setengah tebal. Inilah HTML yang akan digunakan :<\/p>\n

<button<\/span> class<\/span>=\"h-10 px-6 font-semibold rounded-md bg-black text-white\"<\/span> type<\/span>=\"submit\"<\/span>><\/span>Buy now<\/button<\/span>><\/span><\/span><\/pre>\n
HTML berisi enam kelas utilitas.\u00a0Mari kita uraikan masing-masing di bawah ini :<\/p>\n
    \n
  • h-10<\/strong>\u00a0: Kelas ini mengatur tombol ke ketinggian tetap 10 unit.<\/li>\n
  • px-6<\/strong>\u00a0: Kelas ini mengatur padding horizontal tombol menjadi 6 unit.<\/li>\n
  • font-semibold<\/strong>\u00a0: Kelas ini mengatur berat font tombol menjadi semibold.<\/li>\n
  • rounded-md<\/strong>\u00a0: Kelas ini mengatur radius batas tombol sehingga memiliki sudut membulat.<\/li>\n
  • bg-black<\/strong>\u00a0: Kelas ini mengatur warna latar belakang tombol menjadi hitam.<\/li>\n
  • text-white<\/strong>\u00a0: Kelas ini mengatur warna teks tombol menjadi putih.<\/li>\n<\/ul>\n
    Seperti yang mungkin sudah diduga, kurva pembelajaran saat menggunakan Tailwind CSS terutama terdiri dari membiasakan diri dengan kelas utilitasnya. Namun begitu melakukannya akan dapat dengan cepat dan konsisten membuat komponen khusus seperti tombol di bawah ini.<\/p>\n
    \"\"<\/p>\n
    Sekarang setelah kita memahami framework Tailwind CSS dengan lebih baik, mari kita lihat beberapa manfaat menggunakannya.<\/p>\n
    Manfaat Tailwind CSS<\/strong><\/h2>\n
    Ada banyak manfaat menggunakan kerangka kerja CSS seperti Tailwind.\u00a0Di bawah ini adalah yang utama.<\/p>\n
      \n
    • Menulis lebih sedikit CSS khusus<\/strong>.\u00a0Dengan Tailwind, menata elemen dengan menerapkan kelas yang sudah ada sebelumnya langsung di HTML. Dengan menggunakan kelas utilitas dengan cara ini dapat membuat desain khusus tanpa menulis CSS.<\/li>\n
    • Menyimpan file CSS kecil. <\/strong>\u00a0Tanpa kerangka kerja seperti Tailwind, harus terus menulis CSS saat menambahkan fitur dan komponen baru. Akibatnya, file CSS terus bertambah dan bertambah berat. Dengan menggunakan utilitas seperti flexbox dan utilitas padding Tailwind, sebagian besar gaya dapat digunakan kembali sehingga\u00a0 jarang perlu menulis CSS baru.<\/li>\n
    • Tidak perlu menemukan nama kelas<\/strong>.\u00a0Saat Tailwind memilih kelas dari sistem desain yang telah ditentukan sebelumnya. Itu berarti tidak perlu bersusah payah memilih nama kelas “sempurna” untuk gaya dan komponen tertentu, atau mengingat yang rumit seperti sidebar-inner-wrapper.<\/li>\n
    • Dapat membuat perubahan yang lebih aman. <\/strong>\u00a0Dengan pendekatan tradisional, jika membuat perubahan pada CSS, dapat merusak sesuatu di situs. Tidak seperti CSS, kelas utilitas di HTML bersifat lokal. Itu berarti dapat mengubahnya tanpa khawatir merusak sesuatu yang lain di situs.<\/li>\n<\/ul>\n
      Mengapa Tailwind CSS?<\/strong><\/h2>\n
      Sekarang mungkin bertanya-tanya mengapa menggunakan Tailwind daripada kerangka kerja CSS lainnya? Tailwind CSS adalah framework tingkat rendah.\u00a0Artinya, tidak seperti kerangka kerja CSS lainnya seperti Bootstrap dan Materialize, Tailwind tidak menawarkan komponen bergaya penuh seperti tombol, dropdown, dan navbar.\u00a0Sebagai gantinya, ia menawarkan kelas utilitas sehingga dapat membuat komponen sendiri yang dapat digunakan kembali.<\/p>\n
      Untuk alasan itu, ini memberikan lebih banyak fleksibilitas dan kontrol atas seperti apa tampilan aplikasi daripada kerangka kerja CSS lainnya. Ini dapat memungkinkan untuk membuat situs yang lebih unik.<\/p>\n
      Contoh Tailwind CSS<\/strong><\/h2>\n
      Tailwind menawarkan komponen dan template UI, atau “contoh”, untuk membantu mulai membangun aplikasi dengan cepat. Ada repositori yang dibuat oleh Tailwind yang mencakup contoh pahlawan halaman arahan, bagian fitur, formulir pendaftaran buletin, tabel, jendela modal, formulir checkout, keranjang belanja, dan banyak lagi. Bisa mendapatkan kode untuk sebagian besar atau semua contoh ini dengan biaya paket satu kali.<\/p>\n
      Repositori lainnya dibuat oleh anggota komunitas dan bersifat open-source.\u00a0Kami akan fokus pada contoh dari repositori di bawah ini.<\/p>\n
      1. Formulir CSS Tailwind<\/strong><\/h3>\n
      Untuk memungkinkan pengguna berlangganan buletin dapat menggunakan Tailwind untuk membuat formulir keikutsertaan email. Untuk membuat formulir opt-in email sederhana dapat menggunakan kode berikut :<\/p>\n
      <div<\/span>><\/span>\r\n<form<\/span> class<\/span>=\"m-4 flex\"<\/span>><\/span>\r\n<input<\/span> class<\/span>=\"rounded-l-lg p-4 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white\"<\/span> placeholder<\/span>=\"your@mail.com\"<\/span>\/><\/span>\r\n<button<\/span> class<\/span>=\"px-8 rounded-r-lg bg-yellow-400 text-gray-800 font-bold p-4 uppercase border-yellow-500 border-t border-b border-r\"<\/span>><\/span>Subscribe<\/button<\/span>><\/span><\/span>\r\n<\/form<\/span>><\/span>\r\n<\/div<\/span>><\/span><\/pre>\n
      Untuk menyesuaikan batas, warna latar belakang, warna teks, dan aspek lain dari formulir ini, dapat mengubah antara lain kelas utilitas batas-{style}, bg-{color}, dan teks-{color}.<\/p>\n
      Kiat pro :<\/strong> Tambahkan nomor ke kelas utilitas border-{color},bg-{color}, dan text-{color} untuk menggunakan bayangan palet warna default Tailwind.<\/p>\n
      2. Bilah Pencarian CSS Tailwind<\/strong><\/h3>\n
      Untuk memungkinkan pengguna menelusuri aplikasi berdasarkan kata kunci, dapat menggunakan Tailwind untuk membuat bilah pencarian. Untuk membuat bilah pencarian dengan ikon dan tombol Kirim seperti yang ditunjukkan di atas, dapat menggunakan kode berikut :<\/p>\n
      <div<\/span> class<\/span>=\"max-w-2xl mx-auto\"<\/span>><\/span>\r\n<form<\/span> class<\/span>=\"flex items-center\"<\/span>> <\/span>\r\n<label<\/span> for<\/span>=\"simple-search\"<\/span> class<\/span>=\"sr-only\"<\/span>><\/span>Search<\/label<\/span>><\/span><\/span>\r\n<div<\/span> class<\/span>=\"relative w-full\"<\/span>><\/span>\r\n<div<\/span> class<\/span>=\"flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none\"<\/span>><\/span>\r\n<svg<\/span> class<\/span>=\"w-5 h-5 text-gray-500 dark:text-gray-400\"<\/span> fill<\/span>=\"currentColor\"<\/span> viewBox<\/span>=\"0 0 20 20\"<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span>><\/span><path<\/span> fill-rule<\/span>=\"evenodd\"<\/span> d<\/span>=\"M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z\"<\/span> clip-rule<\/span>=\"evenodd\"<\/span>><\/span><\/path<\/span>><\/span><\/svg<\/span>><\/span><\/span>\r\n<\/div<\/span>><\/span>\r\n<input<\/span> type<\/span>=\"text\"<\/span> id<\/span>=\"simple-search\"<\/span> class<\/span>=\"bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500\"<\/span> placeholder<\/span>=\"Search\"<\/span> required<\/span>><\/span>\r\n<\/div<\/span>><\/span>\r\n<button<\/span> type<\/span>=\"submit\"<\/span> class<\/span>=\"p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800\"<\/span>><\/span><svg<\/span> class<\/span>=\"w-5 h-5\"<\/span> fill<\/span>=\"none\"<\/span> stroke<\/span>=\"currentColor\"<\/span> viewBox<\/span>=\"0 0 24 24\"<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span>><\/span><path<\/span> stroke-linecap<\/span>=\"round\"<\/span> stroke-linejoin<\/span>=\"round\"<\/span> stroke-width<\/span>=\"2\"<\/span> d<\/span>=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"<\/span>><\/span><\/path<\/span>><\/span><\/svg<\/span>><\/span><\/button<\/span>><\/span><\/span>\r\n<\/form<\/span>><\/span>\r\n<\/div<\/span>><\/span><\/pre>\n
      Kiat pro :<\/strong>\u00a0Gunakan kelas utilitas w-full untuk mengatur lebar bidang pencarian menjadi 100%.<\/p>\n
      3. Penggeser CSS Tailwind<\/strong><\/h3>\n
      Untuk menggeser beberapa elemen dan gambar, dapat menggunakan Tailwind untuk membuat komponen penggeser atau korsel. Untuk membuat slider seperti yang ditunjukkan di atas, dapat menggunakan HTML berikut :<\/p>\n
      <div<\/span> class<\/span>=\"h-screen w-full overflow-hidden flex flex-nowrap text-center\"<\/span> id<\/span>=\"slider\"<\/span>><\/span>\r\n<div<\/span> class<\/span>=\"bg-blue-600 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center\"<\/span>><\/span>\r\n<h2<\/span> class<\/span>=\"text-4xl max-w-md\"<\/span>><\/span>Your Big Ideia<\/h2<\/span>><\/span><\/span>\r\n<p<\/span> class<\/span>=\"max-w-md\"<\/span>><\/span>It's fast, flexible, and reliable \u2014 with zero-runtime.<\/p<\/span>><\/span><\/span>\r\n<\/div<\/span>><\/span>\r\n<div<\/span> class<\/span>=\"bg-pink-400 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center\"<\/span>><\/span>\r\n<h2<\/span> class<\/span>=\"text-4xl max-w-md\"<\/span>><\/span>Tailwind CSS works by scanning all of your HTML<\/h2<\/span>><\/span><\/span>\r\n<p<\/span> class<\/span>=\"max-w-md\"<\/span>><\/span>It's fast, flexible, and reliable \u2014 with zero-runtime.<\/p<\/span>><\/span><\/span>\r\n<\/div<\/span>><\/span>\r\n<div<\/span> class<\/span>=\"bg-teal-500 text-white space-y-4 flex-none w-full flex flex-col items-center justify-center\"<\/span>><\/span>\r\n<h2<\/span> class<\/span>=\"text-4xl max-w-md\"<\/span>><\/span>React, Vue, and HTML<\/h2<\/span>><\/span><\/span>\r\n<p<\/span> class<\/span>=\"max-w-md\"<\/span>><\/span>Accessible, interactive examples for React and Vue powered by Headless UI, plus vanilla HTML if you\u2019d rather write any necessary JS yourself.<\/p<\/span>><\/span><\/span>\r\n<\/div<\/span>><\/span>\r\n<\/div<\/span>><\/span><\/pre>\n
      Catatan :<\/strong> Komponen ini dibuat tanpa JS Library, tetapi memerlukan JavaScript berikut untuk memicu penggeser.<\/p><\/blockquote>\n
      <script><\/span>\r\ndocument<\/span>.addEventListener('DOMContentLoaded'<\/span>, () => {<\/span>\r\nconst<\/span> slider = document<\/span>.querySelector('#slider'<\/span>);<\/span>\r\nsetTimeout(function<\/span> moveSlide<\/span>() <\/span>{<\/span>\r\nconst<\/span> max = slider.scrollWidth - slider.clientWidth;<\/span>\r\nconst<\/span> left = slider.clientWidth;<\/span>\r\n\r\nif<\/span> (max === slider.scrollLeft) {<\/span>\r\nslider.scrollTo({left<\/span>: 0<\/span>, behavior<\/span>: 'smooth'<\/span>})<\/span>\r\n} else<\/span> {<\/span>\r\nslider.scrollBy({left, behavior<\/span>: 'smooth'<\/span>})<\/span>\r\n}<\/span>\r\n\r\nsetTimeout(moveSlide, 2000<\/span>)<\/span>\r\n}, 2000<\/span>)<\/span>\r\n\r\n})<\/span>\r\n<\/script><\/span><\/span><\/pre>\n
      Kiat pro :<\/strong>\u00a0Tambahkan kelas utilitas flex-nowrap ke div induk untuk mencegahnya membungkus dan tambahkan kelas utilitas flex-none ke div anak (slide) untuk mencegahnya tumbuh atau menyusut.<\/p>\n
      4. Tabel Harga Tailwind CSS<\/strong><\/h3>\n
      Untuk menunjukkan kepada pelanggan beberapa paket premium dengan fitur dan harga yang berbeda, dapat menggunakan Tailwind CSS untuk membuat tabel harga. Untuk membuat bagian \u201cIntro\u201d dari tabel harga seperti yang ditunjukkan di atas, dapat menggunakan kode berikut :<\/p>\n
      <section<\/span> class<\/span>=\"bg-white dark:bg-gray-800\"<\/span>><\/span>\r\n<div<\/span> class<\/span>=\"container px-6 py-8 mx-auto\"<\/span>><\/span>\r\n\r\n<div<\/span> class<\/span>=\"grid gap-6 mt-16 -mx-6 sm:gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\"<\/span>><\/span>\r\n<div<\/span> class<\/span>=\"px-6 py-4 transition-colors duration-200 transform rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700\"<\/span>><\/span>\r\n<p<\/span> class<\/span>=\"text-lg font-medium text-gray-800 dark:text-gray-100\"<\/span>><\/span>Intro<\/p<\/span>><\/span><\/span>\r\n<h4<\/span> class<\/span>=\"mt-2 text-4xl font-semibold text-gray-800 dark:text-gray-100\"<\/span>><\/span>$19 <span<\/span> class<\/span>=\"text-base font-normal text-gray-600 dark:text-gray-400\"<\/span>><\/span>\/ Month<\/span<\/span>><\/span><\/h4<\/span>><\/span><\/span>\r\n<p<\/span> class<\/span>=\"mt-4 text-gray-500 dark:text-gray-300\"<\/span>><\/span>For most businesses that want to optimaize web queries.<\/p<\/span>><\/span><\/span>\r\n\r\n<div<\/span> class<\/span>=\"mt-8 space-y-8\"<\/span>><\/span>\r\n<div<\/span> class<\/span>=\"flex items-center\"<\/span>><\/span>\r\n<svg<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span> class<\/span>=\"w-5 h-5 text-blue-500\"<\/span> viewBox<\/span>=\"0 0 20 20\"<\/span> fill<\/span>=\"currentColor\"<\/span>><\/span>\r\n<path<\/span> fill-rule<\/span>=\"evenodd\"<\/span> d<\/span>=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"<\/span> clip-rule<\/span>=\"evenodd\"<\/span> \/><\/span>\r\n<\/svg<\/span>><\/span>\r\n\r\n<span<\/span> class<\/span>=\"mx-4 text-gray-700 dark:text-gray-300\"<\/span>><\/span>All limited links<\/span<\/span>><\/span><\/span>\r\n<\/div<\/span>><\/span>\r\n\r\n<div<\/span> class<\/span>=\"flex items-center\"<\/span>><\/span>\r\n<svg<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span> class<\/span>=\"w-5 h-5 text-blue-500\"<\/span> viewBox<\/span>=\"0 0 20 20\"<\/span> fill<\/span>=\"currentColor\"<\/span>><\/span>\r\n<path<\/span> fill-rule<\/span>=\"evenodd\"<\/span> d<\/span>=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"<\/span> clip-rule<\/span>=\"evenodd\"<\/span> \/><\/span>\r\n<\/svg<\/span>><\/span>\r\n\r\n<span<\/span> class<\/span>=\"mx-4 text-gray-700 dark:text-gray-300\"<\/span>><\/span>Own analytics platform<\/span<\/span>><\/span><\/span>\r\n<\/div<\/span>><\/span>\r\n\r\n<div<\/span> class<\/span>=\"flex items-center\"<\/span>><\/span>\r\n<svg<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span> class<\/span>=\"w-5 h-5 text-blue-500\"<\/span> viewBox<\/span>=\"0 0 20 20\"<\/span> fill<\/span>=\"currentColor\"<\/span>><\/span>\r\n<path<\/span> fill-rule<\/span>=\"evenodd\"<\/span> d<\/span>=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"<\/span> clip-rule<\/span>=\"evenodd\"<\/span> \/><\/span>\r\n<\/svg<\/span>><\/span>\r\n\r\n<span<\/span> class<\/span>=\"mx-4 text-gray-700 dark:text-gray-300\"<\/span>><\/span>Chat support<\/span<\/span>><\/span><\/span>\r\n<\/div<\/span>><\/span>\r\n\r\n<div<\/span> class<\/span>=\"flex items-center\"<\/span>><\/span>\r\n<svg<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span> class<\/span>=\"w-5 h-5 text-blue-500\"<\/span> viewBox<\/span>=\"0 0 20 20\"<\/span> fill<\/span>=\"currentColor\"<\/span>><\/span>\r\n<path<\/span> fill-rule<\/span>=\"evenodd\"<\/span> d<\/span>=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"<\/span> clip-rule<\/span>=\"evenodd\"<\/span> \/><\/span>\r\n<\/svg<\/span>><\/span>\r\n\r\n<span<\/span> class<\/span>=\"mx-4 text-gray-700 dark:text-gray-300\"<\/span>><\/span>Optimize hashtags<\/span<\/span>><\/span><\/span>\r\n<\/div<\/span>><\/span>\r\n\r\n<div<\/span> class<\/span>=\"flex items-center\"<\/span>><\/span>\r\n<svg<\/span> xmlns<\/span>=\"http:\/\/www.w3.org\/2000\/svg\"<\/span> class<\/span>=\"w-5 h-5 text-blue-500\"<\/span> viewBox<\/span>=\"0 0 20 20\"<\/span> fill<\/span>=\"currentColor\"<\/span>><\/span>\r\n<path<\/span> fill-rule<\/span>=\"evenodd\"<\/span> d<\/span>=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\"<\/span> clip-rule<\/span>=\"evenodd\"<\/span> \/><\/span>\r\n<\/svg<\/span>><\/span>\r\n\r\n<span<\/span> class<\/span>=\"mx-4 text-gray-700 dark:text-gray-300\"<\/span>><\/span>Unlimited users<\/span<\/span>><\/span><\/span>\r\n<\/div<\/span>><\/span>\r\n<\/div<\/span>><\/span>\r\n\r\n<button<\/span> class<\/span>=\"w-full px-4 py-2 mt-10 font-medium tracking-wide text-white capitalize transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:bg-blue-600\"<\/span>><\/span>\r\nChoose plan<\/span>\r\n<\/button<\/span>><\/span>\r\n<\/div<\/span>><\/span>\r\n\r\n\r\n<\/div<\/span>><\/span>\r\n<\/div<\/span>><\/span>\r\n<\/section<\/span>><\/span><\/pre>\n
      Catatan : Kode ini hanya akan membuat wadah pertama untuk paket “Intro”. Untuk membuat wadah untuk paket “Dasar”, “Populer”, dan “Perusahaan”, harus mereplikasi kode ini, menukar teks untuk setiap nama paket dan harga.<\/p><\/blockquote>\n
      Kiat pro :<\/strong>\u00a0Tambahkan pengubah “hover:” sebelum nama kelas seperti “bg-gray-200” untuk menerapkan kelas utilitas itu secara kondisional (yaitu sehingga wadah hanya mengubah warna latar belakang saat pengguna mengarahkan kursor ke atasnya).<\/p>\n\n\n
      \n            \n
      \n    \n
      \n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n    <\/div>\n    \n
      \n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n
      \n            5\/5 - (2 votes)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"
      Saat membuat kode aplikasi dari awal ingin itu mencerminkan merek unik, responsif pada perangkat apa pun, dan mudah untuk menulis dan memelihara dan itu mungkin hanya beberapa item di daftar sesuai keinginan. Dengan membangun dengan Tailwind CSS dapat mencentang item ini dari daftar. Tailwind CSS adalah kerangka kerja untuk membangun dan menyesuaikan aplikasi dengan cepat […]<\/p>\n","protected":false},"author":7,"featured_media":16265,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[6216,6215,6214],"class_list":["post-16261","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-contoh-tailwind-css","tag-manfaat-tailwind-css","tag-pengertian-tailwind-css"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya-1140x445.png",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya-300x169.png",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya.png",1920,1080,false]},"yoast_head":"\nMengenal Apa Itu Tailwind CSS, Mengapa Menggunakannya dan Contohnya - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mengenal Apa Itu Tailwind CSS, Mengapa Menggunakannya dan Contohnya - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Saat membuat kode aplikasi dari awal ingin itu mencerminkan merek unik, responsif pada perangkat apa pun, dan mudah untuk menulis dan memelihara dan itu mungkin hanya beberapa item di daftar sesuai keinginan. Dengan membangun dengan Tailwind CSS dapat mencentang item ini dari daftar. Tailwind CSS adalah kerangka kerja untuk membangun dan menyesuaikan aplikasi dengan cepat […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-04T07:22:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-04T08:13:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Risa Y\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Risa Y\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya\"},\"author\":{\"name\":\"Risa Y\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\"},\"headline\":\"Mengenal Apa Itu Tailwind CSS, Mengapa Menggunakannya dan Contohnya\",\"datePublished\":\"2022-06-04T07:22:01+00:00\",\"dateModified\":\"2022-06-04T08:13:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya\"},\"wordCount\":905,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya.png\",\"keywords\":[\"contoh tailwind css\",\"manfaat tailwind css\",\"pengertian tailwind css\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya\",\"url\":\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya\",\"name\":\"Mengenal Apa Itu Tailwind CSS, Mengapa Menggunakannya dan Contohnya - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya.png\",\"datePublished\":\"2022-06-04T07:22:01+00:00\",\"dateModified\":\"2022-06-04T08:13:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya.png\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mengenal Apa Itu Tailwind CSS, Mengapa Menggunakannya dan Contohnya\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita & Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\",\"name\":\"Risa Y\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"caption\":\"Risa Y\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mengenal Apa Itu Tailwind CSS, Mengapa Menggunakannya dan Contohnya - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya","og_locale":"en_US","og_type":"article","og_title":"Mengenal Apa Itu Tailwind CSS, Mengapa Menggunakannya dan Contohnya - Hosteko Blog","og_description":"Saat membuat kode aplikasi dari awal ingin itu mencerminkan merek unik, responsif pada perangkat apa pun, dan mudah untuk menulis dan memelihara dan itu mungkin hanya beberapa item di daftar sesuai keinginan. Dengan membangun dengan Tailwind CSS dapat mencentang item ini dari daftar. Tailwind CSS adalah kerangka kerja untuk membangun dan menyesuaikan aplikasi dengan cepat […]","og_url":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya","og_site_name":"Hosteko Blog","article_published_time":"2022-06-04T07:22:01+00:00","article_modified_time":"2022-06-04T08:13:05+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya.png","type":"image\/png"}],"author":"Risa Y","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Risa Y","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya"},"author":{"name":"Risa Y","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b"},"headline":"Mengenal Apa Itu Tailwind CSS, Mengapa Menggunakannya dan Contohnya","datePublished":"2022-06-04T07:22:01+00:00","dateModified":"2022-06-04T08:13:05+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya"},"wordCount":905,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya.png","keywords":["contoh tailwind css","manfaat tailwind css","pengertian tailwind css"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya","url":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya","name":"Mengenal Apa Itu Tailwind CSS, Mengapa Menggunakannya dan Contohnya - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya.png","datePublished":"2022-06-04T07:22:01+00:00","dateModified":"2022-06-04T08:13:05+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya.png","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/mengenal-apa-itu-tailwind-css-mengapa-menggunakannya-dan-contohnya#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Mengenal Apa Itu Tailwind CSS, Mengapa Menggunakannya dan Contohnya"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita & Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b","name":"Risa Y","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","caption":"Risa Y"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2022\/06\/Mengenal-Apa-Itu-Tailwind-CSS-Mengapa-Menggunakannya-dan-Contohnya.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/16261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=16261"}],"version-history":[{"count":4,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/16261\/revisions"}],"predecessor-version":[{"id":16273,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/16261\/revisions\/16273"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/16265"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=16261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=16261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=16261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}