Apa itu Tailwind CSS?
Disclaimer : Materi ini di ambil dari Channel Youtube WPU
Tailwind CSS merupakan framework CSS yang utility first. Dimana tiap kelasnya hanya mengerjakan 1 hal saja. Sedangkan, perbedaannya dengan bootstrap, bootstrap UI Frameworks. Dimana tidak hanya ada utility tapi ada juga component class. Sedangkan, dengan menggunakan Tailwind CSS merupakan sebuah utility first sehingga kita bisa membuat componentnya sesuai style yang kita inginkan.
Tailwind CSS dibuat oleh Adam Wathan, pada 1 November 2017
Utilities yang ada di TailwindCSS :
- Prefilight (CSS resetnya TailwindCSS)
- Layout
- Flexbox & Grid
- Spacing & Sizing
- Typography
- Background & Borders
- Effect & Filters
- Transition, Transformation & Animation
- Tables
Features unggulan di TailwindCSS :
- Interactivity (Pseudo-classes : hover | active | first | last | dll, Pseudo-element : before | after | dll.)
- Responsive Design (Ada 3 bricket point : Small | Medium | Large )
- Dark Mode (Bisa kita gunakan dark sebelum class)
- Reusability
- Custom Styles
- Functions & Directives
TailwindCSS kok jadi mirip inline css ?
Secara sekilas memang mirip inline css htmlnya menjadi tidak rapih, namun perbedaannya di inline css kita tidak bisa menerapkan interactivity nya langsung di inline css sedangkan di TailwindCSS kita bisa menerapkan interactivitynya langsung sebagai kelas. Jadi, beda yah antara inline css dan TailwindCSS.
Pre-requisite :
- HTML
- CSS
- Bootstrap *
- CSS Pre-processor
- NPM
Software Requirements :
- Web Browser : Google Chrome
- Code Editor : Visual Studio Code
- VSCode Extension : Tailwind CSS IntelliSense
- Package Manager : NPM (Node.js)
