6. Pseudo-class & Dark Mode | Belajar Tailwind CSS

[@mushafmiftah5388]

Terimakasih pak atas ilmu yang diberikan, maaf baru ikutan playlistnya 🤭 ijin memberikan saran untuk yang kesulitan dalam menampilkan bagian transisi toggle nya bisa dicoba pakai code berikut, {{-- Checked Toggle --}} Light Dark untuk yang di tidak perlu diubah, sedang untuk yang di bisa dihapus saja 👌

[@rinandaisac7201]

Terimakasih Pak, berkat playlist ini saya jadi mulai suka frontend hehe, semoga sehat selalu Pak Dhika sedikit berbagi tips : bagian toggle putih itu bisa digeser tanpa membuat custom css, dengan cara menambahkan class dark:translate-x-3 => artinya ketika mode dark kita akan geser div untuk lingkarang putih ke kanan sebenernya sama hasilnya cuma biar lebih sesuai sama tagline tailwind "...without leaving your html"

[@ferryfernando_]

Thanks!

[@dzikrinurakbar8008]

thanks kak

[@albretus7981]

mantap kak

[@RianY2K]

Setelah saya coba ikutin tutorial video ini., simpel banget ya bikin dark mode di Tailwind ini. 👍

[@mrh30]

Mantap pak, sangat detil Gara2 awal belajar cuma ngambil yg sering dipake buat bikin full page. Jadi gak baca semua dokumentasi. Sekarang jadi tau utility yg belum pernah dipake

[@AldiPrasetyo]

Terima kasih pak Sandhika. Berkat video ini website portofolio yang sedang saya dev akan segera punya Dark Mode.

[@peterchristoval3889]

Wah, tutor ini yg saya tunggu dari series tailwindCSS. Tq pak Dhika 😊🙏🏼

[@mahasiswabisa]

Sangat membantu untuk pemula :) terimakasih banyak pak sandhika atas ilmu2 nya

[@Bligedebali]

Makasi Pak sandhi kagalih Atas Tutor nya Kalau yg nemu error Unknown at rule @apply css(unknownAtRules) Coba pindahkan code css untuk toggle nya ke file Src/css/input.css Di folder latihan nya Dan build atau "npm run dev" ulang Kira kira jadi sprti ini @tailwind base; @tailwind components; @tailwind utilities; #toggle:checked ~ label div.toggle-cirle{ @apply translate-x-3; }

[@lawaks99]

makasih bangg😁

[@Bligedebali]

@@lawaks99 siap bang 👍👍😀

[@Delion_07]

Oiya bisa kalo di ketik disitu , makasih udah menyelamatkan laptop ku dari kehancuran☺️

[@mrizqighana]

Alhamdulillah bisa, makasih banyak mas 🙏

[@igunawan550]

Terima kasih atas solusinya mas

[@trisyabanaoctabiar6973]

terimakasih atas ilmunya pak dhika sangat bermanfaat sekali, semoga sehat selalu pak, semangat terus dalam berkarya pak :)

[@MuhammadAli-co7ux]

pas banget pak. baru nyalain laptop mau ngoding ada notifikasi.

[@fitriaputrifisabilla5718]

Penjelasannya lengkap bgt dan selalu bikin paham. Terimakasii

[@NayNay_Family]

pak pelajaran tailwind CSS ini jangan lupa masukin playlist soalnya nanti saya mau belajar ualng2 lagi engga ribet nyari-nyarinya pak. terimakasih ilmunya pak, sehat selalu, panjang umur pak, dan berkah ilmunya pak aamin☺🤗

[@digitaltama]

masukin playlist pribadi aja di yt lu gan sementara, biar pak dika fokus selesain playlist ini cpet kelar ,saran aja.

[@NayNay_Family]

@@digitaltama ide bagus gan thanks saya lupa kalau bisa tambah playList sendiri 🙏

[@bachrulpanjigumilang3821]

mantap langsung saya perkatekan pas lagi ngoding nih makasih pak

[@sanjaya_doang492]

Lanjutkan pak 🔥 , Terima kasih ilmunya pak jadi paham belajar tailwind

[@RayaSabari]

mantaap, di episode ini baru tau ada peering sm grouping

[@sonihidayatulloh9242]

Yang ditunggu2 makasih pak sehat selalu 😁

[@youngestbro1318]

Keren bgt pak dika makasih!

[@richardlaurent999]

Pak Sandhika, mohon maaf untuk yang di akhir untuk yang Systemnya memang mau Default di Dark Mode bisa menggunakan cara seperti saya : checkbox.addEventListener('click', function() { checkbox.checked ? body.classList.add("dark:bg-slate-800") : body.classList.remove("dark:bg-slate-800"); }); Karena, menurut saya seperti ini kita ganti menjadi nya saja pak, jadi bukan htmlnya. Tapi, kelas yang ditambahkan "dark:bg-slate-800". 😁

[@rajahutan3181]

Nggak work bang

[@herlanmustopa]

terimakasih dan panjang umur pak Dhika..🙏🏻🔥❤️

[@chairilaliart]

Ngikutin terus pak, terimakasih 😄

[@yasudahlah3917]

terima kasih pak dika atas tutorialnya hehehehe

[@weha002]

Penjelasannya jelas. terima kasih

[@prayogiss]

semangat terus pak dhika semoga sehat selalu, saya lagi ketagihan bikin front end pake tailwind nih pak

[@yokijatiperkasa861]

wkwk gila ni pa dika, keren banget bikin toggle manual, terimakasih pa dika

[@alunaludin5533]

Terimakasih pak ilmunya, sehat2 terus pak.

[@andrisetianabrata]

Di tunggu video selanjutnya 😘

[@bangnasution165]

Terima kasih banyak pak dhika atas ilmunya😀

[@Pettanchord]

bisa gak sih dibanding dengan menulis hover:bg-slate-400 hover:ring-1 menjadi seperti hover:{bg-slate-400 ring-1} apa ada cara seperti itu?

[@the-LordXNobx]

Mantap tutorialnya pak😁

[@immortal_code]

terima kasih pak. sangat manfaat

[@aufazamzamramadhani2555]

mantap pak lanjutkan terus,, terimakasih pak :)

[@novrizal1956]

Haturnuhun pak dika

[@ahmadhabiburrahmanofficial3565]

semoga bang sandhika galih selalu diberikan kesehatan...

[@aryapratama1926]

Ditunggu tentang Grid sama Flex ditailwindnya pak

[@kholidirfangi9346]

always impressive..😍

[@soffanhidayat8653]

Akhirnya,, ini yg bikin pusing darkmode

[@computeristid8365]

Langsung gass ngikutin

[@ChanellHewan]

Mantap.. ditunggu ngoding narengnyaa

[@yoogyhandinata7887]

Masih semangat dong pak. Belajar hal baru itu menyenangkang 👍

[@pilotgundul]

keren ya ini pak

[@relaxingrainmusictrv611]

Trimakasih kqk infonya

[@irfanabdullah756]

kereennn

[@muzammil8498]

mantap pak

[@gimmickdoangini]

Pak Request buatin playlist Belajar jQuery dong 😁

[@ronigustian6791]

terima kasih banyak pak, mau tanya jika elemenya di selection, warna parentnya tetap seperti saat hover walaupun kursornya dipindah pak?

[@orizasativaofficial]

pa dika, fullstackdesigner udah ga ada lagi ya? aku pengen beli :D

[@Kelvin_Falah]

Waduh pak saya pusing bgt hhe..3 jam ngikutin tutorialnya

[@fatkur]

gokill

[@Pemancingkaki5]

Mantap pak dika

[@asheaven1st]

Belajar CSS secara manual.. Me: Apa itu 'pseudo-class'..? 😵‍💫 Belajar CSS via TailwindCSS Me: Oo, gitu cara pake-nya.. 😮 Overiding TailwindCSS dengan CSS manual. Me: Yeah.. I know how to use this pseudo-class..! 😂

[@christianleonard3029]

Terimakasih untuk tutorialnya Pak, sangat jelas! 🙏🏻 Mau bertanya sedikit Pak, saya ada kendala pada toggle button dark mode, saat saya install tailwind dengan CLI, script untuk menggeser toggle nya tidak berfungsi, sedangkan jika pakai Play CDN berfungsi. Mohon pencerahannya Pak, terima kasih 🙏🏻

[@dirgaastya7410]

kalo saya coba dimasukin ke input.css nya bisa mas

[@christianleonard3029]

@@dirgaastya7410 terima kasih mas 🙏🏻

[@aprilianajanatumarwa2720]

@@dirgaastya7410 saya gabisa bisaa

[@muhammadrizqi7663]

@@dirgaastya7410 makasih mas, saya sudah coba, it's work

[@Vanzlfkr]

@@dirgaastya7410 thank you mas, work

[@gwkomenapaadanya4151]

Halo mas.. Itu cursor blinking nya vscode nya keren, seperti ada animasi nya.. Cara setting nya bgm ya mas?

[@arebend]

Penasaran pagination sama filter kalo buat dashboard pake tailwind

[@z911dn]

Lets gooo

[@muhammad6901]

Halo pak mo tanya ini kok di saya ga tampil ya color picker nya dibagian class nya ? pdhl udh pake ext Color Highlight....cuman muncul di css ato color yg pake code misal #da828 cuman kalo text-slate-400 ga muncul color highlight nya

[@dave_an]

Req bljr react pak

[@sumberparlay6450]

grid area jangan lupa pak hehe

[@fadzrinmadu]

mau tanya bedanya ring sama outline/border itu apa yah?

[@putehputih6676]

pak ini kenapa darkmode saya nggak aktif ya T-T udh ditambah di file tailwind.config nya, udh di sblh tag html, udh di bagian body, kenapa blm muncul darkmode ya pak:( mohon pencerahannya pak T_T

[@muhammadfarhannudin5582]

Sama duh

[@suryon3822]

//kalo di windows 10 setting >> personalization >> colors bar sebelah kiri >> cari choose your color >> pilih dark //yang toggling dark di configuration sempet salah, ternyata di titik dua nya kurang. jadi sy coba diteliti lagi tanda baca di body. sama togling nya

[@arfian2574]

Permisi padika ijin bertanya semoga direspon, kalau di website ada 3 opsi(dark mode, light mode, sesuai system) gimana cara buatnya?

[@abyghails]

Terima kasih pak sandhika.. Ohiya temen-temen kok saya pas styling untuk toggle dark modenya ga berfungsi ke kiri dan ke kanan. Ada error juga di @apply nya. Ada yang tau ?? terimakasihh

[@mataringan4544]

udah bisa mas ? soulisanya gimana ya

[@abyghails]

@@mataringan4544 belum bang. Akhirnya saya lewati dulu itu masalahnya 🙃

[@mr.malampir]

#toggle:checked ~ label div.toggle-circle { @apply translate-x-3; } coba pke ini mngkin typo di yg strip(-) hrusnys ~

[@rizkykurniaramadhan6616]

Kayanya yang install tailwindnya pake cdn aja yang bisa langsung naro style disitu. barang kali kalo installnya pake cli coba aja mas di taro di input.css codingannya @tailwind base; @tailwind components; @tailwind utilities; @layer components { #toggle:checked ~ label div.toggle-circle { @apply translate-x-3; } }

[@abyghails]

@@rizkykurniaramadhan6616 Workk mas. Thanks ya 😁😁

[@ilhamsaputray]

Abis ini Tutorial React ya pak

[@zainulrhmt1142]

bagian trakhirnya yang java itu gimana bang soalnya ini saya bukan secara di ketik lewat script kyknya harus di taro di tailwind.config.js kyknya tau bukan

[@susu_gajah]

Kalo di refresh dark mode nya jadi light pak gmna tuh JavaScript nya??

[@zulfikarfauzi5786]

permisi maaf, kok saya add class dark di body malah langsung berubah/aktif? Mohon jawabannya🙏

[@004_hariandomuthi8]

Tutorial pemrograman mobile pak, terimakasih pak 🙏

[@rabofficial1290]

Maaf mas nama chanel nya web programing unpas

[@galangsamudra6123]

Bang kok saya toggle nya tidak bisa ke switch ya

[@lovzansky_5590]

Pak dika, saya sudah tambahkan style untuk toggle nya, tapi tidak berhasil untuk perpindahan buttonnya, apakah karena saya menggunakan Tailwind CLI pada saat installation? Mohon bantuannya pak.

[@rajahutan3181]

Iya sama wkwkw

[@lovzansky_5590]

@@rajahutan3181 masukin style yang baru nya ke main.css nya bro. di bawah bikin layer baru, nemu di dokumentasi tadii haha

[@CoinDropsUnleashed]

Bang bahas Jekyll static site generator bang.

[@disconnected23]

izin bertanya Pak, kenapa ya kalau menggunakan tailwind cli tidak bisa menambah custom style seperti di video #toggle:checked ~ label div.toggle-circle { @apply translate-x-3; }

[@rabofficial1290]

Di gw juga ngk ngeser bang klo di klil togglenya knp yah?

[@nandoperd]

warning ya? kalo warning ke menu preference>setting>search unknown at rule terus pilih ignore

[@mr.bajiajalah]

sama anjoy wkwk, gw mau nanya tapi udh ada yang nanyain

[@karinainojin2385]

​@@nandoperdtetep gak geser, apa karena saya instal tailwind pake CLI ?

[@MVMXI]

Guys gimana udah bisa geser belom toggle nya wkwk

[@zymfotografer1999]

saya mau bertanya pak untuk keterangan di tulisan unknown at rule saat penulisan directrory @apply itu kira kira kenapa y pak?

[@rabofficial1290]

Nitip bang saya juga ngk bisa pke @apply 😢

[@nandoperd]

ubah di reference setting

[@RizaHariati]

saya berpuluh tahun pakai windows ga tahu kalo ada dark mode pak...

[@ardienferdinandps4031]

Assalamualaikum pak, tutorial buat diagram batang amcharts dong pak, makasih

[@ardienferdinandps4031]

Saya mohon banget pak saya lagi pkl dan saya mencari tutorial dimana2 hanya sedikit

[@ardienferdinandps4031]

Ayu bantu up semua

[@ardienferdinandps4031]

AMCHARTS AMCHARTS AMCHARTS

[@deniespranata9907]

dari dulu nunggu, eh malah telat 2 hri

[@h4rd833]

Yang bagian dark mode, pada saat checkboxnya di click, bisa lebih singkat seperti ini: checkbox.addEventListener('click', function () { html.classList.toggle('dark') })

[@hidayatramadhanisupriyatna876]

Yups betul

[@cursnet7101]

sebernarnya tailwind + bootstrap di recommended ga sih?, saya pakai tailwind + bootstrap enak. grid system nya dari bootstrap, component nya dari tailwind haahha. oiya tailwindnya pakai prefix: "tw-" jadi setiap class seperti ini : tw-text-gray-800 tw-bg-slate-700

[@dirarmdn]

maaf mau nanya, gimana cara ngaturnya supaya bisa pake prefix tw- kayak gitu?

[@shulhififuadi5799]

Ijin bertanya pak, kalau bagi pemula banget. Mau belajar buat sistem pendukung keputusan (SPK), baiknya pakai Bahasa pemograman PHP atau CSS(html) ya. Atau yang lain?. Soalnya yang saya pernah pelajari 2 itu 🙏🙏 Mohon jawabannya ,🙏

[@nofrisdansitopu6151]

css bukan bahasa pemrograman, kalau ditanya buat spk gunain php sebagai backend ya jelas pasti bisa, dan untuk tampilan utama dibangun menggunakan html + css

[@shulhififuadi5799]

@@nofrisdansitopu6151 siap kak, terimakasih

[@PamujiWisanggeni]

bang maaf agak nyeleweng, kalau perintah grant & revoke itu berlaku/digunakan di pengkodingan juga atau cuma di rdbms aja?

[@g0.0d_m0.0d]

lagi enak-enak belajar tailwind, tiba-tiba auto-complate nya engga work. udah coba tutorial yt masih engga bisa. mohon bantuannya teman-teman 🙏

[@reia1877]

@apply nya di saya ga berfungsi, ada yang bisa bantu?

[@noviaamarsheilaa5344]

sama, udah bisa belum ya?

[@growwithupigenggamdigital6890]

kok saya nggak bisa pake ring ya pak wkwkwkwkwk

[@El-Aina]

const checkbox = document.querySelector('#toggle'); const html = document.querySelector('html'); checkbox.addEventListener('click', function () { html.classList.toggle('dark') })

[@mr.bajiajalah]

how?

[@agusttroll8948]

The First

[@jfrosorio]

Why putting the video title in english?!! This is click bait.