Skip to content

Latest commit

 

History

History
53 lines (45 loc) · 2 KB

README.md

File metadata and controls

53 lines (45 loc) · 2 KB
Raw

Belajar-Tailwind-CSS

Tailwind CSS adalah kerangka kerja CSS sumber terbuka. Fitur utama dari library ini adalah, tidak seperti framework CSS lainnya seperti Bootstrap, library ini tidak menyediakan serangkaian kelas standar untuk elemen seperti tombol atau tabel.

Buka Website Tailwind CSS

Software yang di butuhkan

  • Web Browser
  • Code Editor
  • VSCode Extension
    • [------------------------]
    • Tailwind CSS IntelliSense
    • Live Preview
    • Post CSS Language Support
    • [------------------------]
  • NPM (Node.js)
  • Terminal

Cara instalasi menggunakan NPM

  • $npm init (Berfungsi untuk menginisiasi folder project, jika ingin langsung bisa tambahkan -y)
  • $npm i -D tailwindcss postcss autoprefixer
  • $npx tailwindcss init (Untuk menginisiasi tailwind config)

#index content: [ './**/*.{html, js}' ]

  • ./ (folder root)
  • ** (mengecek semua folder yang ada didalamnya)
  • * (mengecek semua file apapun yang ada didalamnya)
  • *.{html, js} (mengecek semua file apapun yang ada didalamnya selama extensinya html dan js)

Konfigurasi TailwindCSS

  • Tambahkan sebuah Tailwind directives ke CSS kita, tambahkan @tailwind directives untuk setiap lapisan Tailwind ke file CSS utama Anda.
    example: buat di src/input.css
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  • Mulai untuk building Tailwind CSS Jalankan alat CLI untuk memindai file template Anda untuk kelas dan membangun CSS Anda.
    npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
  • Hubungkan index.html anda ke output.css
  • Done happy hacking