Sudah sejak 18 bulan lalu tailwind telah merilis tailwind versi v1.0 yang mana selama v1.0 itu mereka banyak merilis 9 fitur minor yaitu laceholder styling, screenreader visibility, CSS grid, transitions, transforms, animations, layout utilities, integrated tree-shaking, gradients, dan banyak lagi.
baru-baru ini tailwind merilis tailwind v2.0 dengan banyak firu-firu baru yang ditambahkan yaitu All-new color palette, Dark mode support, Extra wide 2XL breakpoint, New outline ring utilities, Utility-friendly form styles,Default line-heights per font-size,Extended spacing, typography, and opacity scales,Use @apply with anything,New text overflow utilities,Extend variants, Group-hover and focus-within by default, Default transition duration and easing curve, Incompatibility with IE11
untuk detailnya bisa langsung klik pada link tesebut.
Pada blog kali saya akan meberikan bagaimana cara installasi tailwind dan mengaktifkan dark mode pada tailwind .
tools yang dibutuhkan antara lain adalah
- Node js (lst version atau yang terbaru untuk cek versi ketikan node -v pada terminal )
- Npm
Persiapan Project
buat folder bebas dengan nama apa saja disini namanya tailwind-v2 Dan buka di terminal jalankan
npm init -y 
Install Tailwindcss , autoprefixer dan postcsss
Jalankan perintah
npm install tailwindcss postcss autoprefixer 
npm install tailwindcss postcss autoprefixerSelanjutnya kita init config tailwind dengan perintah
npx tailwind init --full maka kan membuat file tailwind.config.js di folder root
Buat file dengan nama postcss.config.js pada root folder
module.exports={ plugins:[ require('tailwindcss'), require('autoprefixer'), require('./tailwind.config.js') ]}
Selanjutnya buat dua file css yaitu tailwind.css dan main.css diletakan pada folder styles. kita biarkan main.css kosong yang nantinya akan auto digenerate ketika kita build cssnya
Pada file tailwind.css kita isi
@tailwind base;@tailwind components;@tailwind utilities;
berikut bentuk struktur folder projectnya
Tahap terakhir yaitu kita build tailwindnya dengan menjalankan perintah di cmd yaitu
npx tailwindcss build .\styles\tailwind.css -o .\styles\main.css
Jika kita buka file main.css maka akan berisi style-style bawaain dari tailwindcss itu sendiri.Sudah selasai setup projectnya sampai disini tinggal kita import saja :D langung cus ngoding sesuka hati.
Mengaktifkan Dark Mode
Buat file index.html letakan pada root folder project tersebut dan impor file main.css pada head tag html.
untuk mengaktifkan darkmode tinggal memanggil class dark: tinggal tambah class yang ingin ditambahkan pada contoh diatas
dark:bg-gray-800 dark:text-gray-200Contoh lainnya detailnya bisa buka link https://tailwindcss.com/docs/dark-mode
Jika dijalankan mode darknya belum bisa dijalankan ,selajutnya kita perlu edit tailwind.config.js dan membuat fungsi button toggle .
pertama tambahkan tag <script> pada bagian akhir sebelum body.
Tahap Terakhir buka file tailwind.config.js
pada dakMode isi dengan class
kenapa menggunakan class karna kita ingin mengaktifkan darkmodenya manual dengan fungsi toggle button ,ketika buttonya ditekan akan menambahkan class=”dark” pada tag <html>
Contoh Simulasinya
Ketika button ditekan maka akan menambahkan class dark, ketika ada class dark tersebut maka modedarknya sudah aktiff
Sebelum Menjalankan Kita perlu build ulang tailwind.css nya dengan perintah sebelumnya yaitu
npx tailwindcss build .\styles\tailwind.css -o .\styles\main.cssNah Sekarang bisa Dijalankan dah lihat hasilnya
- note ketika saya akan membuild tailwindcss saya mendapatkan error karna saat itu saya menggukaan node versi 10. Ketika saya update nodenya ke versi 12 lts baru bisa dibuild , pastikan gunakan node versi lts terbaru.
TerimaKasih telah menyempatkan mampir kesini , saya harap ini bermanfaat ,
jangan lupa tinggalkan jejak di komentar atau diclapp