{"id":21376,"date":"2024-06-03T11:15:00","date_gmt":"2024-06-03T04:15:00","guid":{"rendered":"https:\/\/jakarta.telkomuniversity.ac.id\/?p=21376"},"modified":"2024-06-03T11:14:25","modified_gmt":"2024-06-03T04:14:25","slug":"tailwind-css-framework-css-untuk-mengembangkan-ui-dengan-cepat","status":"publish","type":"post","link":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/tailwind-css-framework-css-untuk-mengembangkan-ui-dengan-cepat\/","title":{"rendered":"Tailwind CSS, Framework CSS untuk Mengembangkan UI dengan Cepat"},"content":{"rendered":"

Tailwind CSS, Framework CSS untuk Mengembangkan UI dengan Cepat<\/h1><\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Dalam pembuatan user interface sebuah website, seringkali Anda pasti menggunakan sebuah framework yang dapat\u00a0 memudahkanmu dalam menyesuaikan dan mempercantik sebuah website tanpa memerlukan logika pemrograman coding yang rumit. Framework dalam user interface website yang biasanya dikenal adalah bootstrap. Namun seiring berkembangnya zaman, framework yang digunakan pada sebuah website dapat beraneka ragam. Salah satu yang akan dibahas pada artikel ini adalah Tailwind CSS.<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Apa Itu Tailwind CSS?<\/h2><\/div><\/div><\/div><\/div>
\n\t
\n\t\t\n\t\t
\n\t\t\t
\"tailwind<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Tailwind CSS, menurut Hubspot, adalah kerangka kerja CSS yang mengutamakan utilitas yang dibuat untuk mempercepat dan menyederhanakan pembuatan aplikasi yang menggunakan desain unik. Utilitas tingkat rendah yang dikenal sebagai kelas utilitas pertama digunakan untuk membuat desain unik dalam file HTML. Untuk memastikan bahwa nama kelas utilitas dapat dipahami oleh khalayak luas, pengembang harus memberi nama berdasarkan tujuan penggunaannya.\u00a0<\/span><\/p>\n

Pengembang dapat menyesuaikan font, warna, spasi, tata letak, bayangan, dan elemen desain lainnya agar sesuai dengan kebutuhan desain komponen mereka dengan memanfaatkan kelas utilitas. Tidak perlu meninggalkan kode HTML apa pun atau membuat CSS khusus untuk menyelesaikan tugas.\u00a0<\/span><\/p>\n

Kerangka kerja Tailwind, yang mengutamakan alat untuk mengembangkan desain khusus, merupakan konsep yang menarik. Tailwind tidak menyediakan template atau gaya tertentu. Tailwind, di sisi lain, menyediakan blok bangunan yang ramai, yang disebut sebagai kelas utilitas, untuk membantu menata elemen situs web.<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Sejarah Tailwind CSS<\/h3><\/div><\/div><\/div><\/div>
\n\t
\n\t\t\n\t\t
\n\t\t\t
\"sejarah<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t

Tailwind pertama kali diciptakan oleh para insinyur dan desainer kawakan di bidang terkait, Adam Wathan, Jonathan Reinink, David Hemphill, dan Steve Schoger. Tujuan mereka adalah mengembangkan kerangka kerja yang berbeda dari kerangka CSS konvensional.\u00a0\u00a0<\/span><\/p>\n

Latar belakang ini berasal dari kendala yang mereka temui saat menggunakan teknologi yang sudah ada sebelumnya (seperti Foundation atau Bootstrap), yang sering kali membatasi kebebasan desain dengan kelas dan komponen yang telah diberi gaya sebelumnya.\u00a0<\/span><\/p>\n

Tailwind, sebuah kerangka kerja yang “mengutamakan utilitas” yang menawarkan metode pengembangan web baru, diumumkan pada tahun 2017. Daripada bergantung pada perangkat yang sudah dibuat sebelumnya, tujuan utamanya adalah membantu pengembang dalam bekerja dengan kelas utilitas yang dapat digabungkan dan disesuaikan untuk membuat desain yang unik.\u00a0<\/span><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Tutorial Tailwind CSS<\/h4><\/div><\/div><\/div><\/div>
\n\t
\n\t\t\n\t\t
\n\t\t\t
\"tutorial<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
\n\t
\n\t\t
\n\t\t\t
    \n
  1. Pertama, Anda perlu menginstal Tailwind CSS ke dalam proyek. Instalasi bisa dilakukan menggunakan NPM (Node Package Manager) atau Yarn. caranya, buka terminal atau command line, navigasikan ke direktori proyek, kemudian jalankan perintah berikut: npm install tailwindcss<\/span>
    \n<\/span>Jika menggunakan Yarn: yarn add tailwindcss<\/span><\/li>\n
  2. Setelah instalasi, langkah selanjutnya adalah membuat file konfigurasi Tailwind. File ini berguna untuk menyesuaikan setting Tailwind sesuai kebutuhan proyek. Untuk membuat file konfigurasi, jalankan perintah berikut: npx tailwindcss init<\/span>
    \n<\/span>Perintah di atas akan menghasilkan <\/span>file<\/span><\/i> tailwind.config.js yang bisa Anda modifikasi.<\/span><\/li>\n
  3. Anda perlu membuat file CSS yang berisi direktif khusus untuk Tailwind. Buat file baru dengan nama apapun sesuai kebutuhan (misalnya, styles.css) dan tambahkan baris berikut:
    \n<\/span>@tailwind base;
    \n@tailwind components;
    \n@tailwind utilities;
    \nArahan ini memberitahu Tailwind untuk menyertakan style dasar, komponen, dan utility-nya.<\/li>\n
  4. Setelah menyiapkan file CSS, Anda harus mengompilasinya menjadi file CSS akhir yang akan digunakan di website. Jalankan perintah berikut di terminal: npx tailwindcss build styles.css -o output.css<\/span><\/li>\n
  5. Langkah terakhir adalah menyertakan file CSS yang telah dikompilasi ke dalam proyek web. Tambahkan tag < link > ke file HTML utama yang mengarah ke file CSS-mu: <link href=”\/path\/to\/your\/output.css” rel=”stylesheet”><\/span>
    \n<\/span>Pastikan untuk mengganti \/path\/to\/your\/ dengan directory path sesuai tempat file output.css berada.<\/span><\/li>\n
  6. Sekarang, Anda sudah bisa mulai menggunakan utility class Tailwind dalam markup HTML untuk membuat desain UI.<\/span><\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>
    \n\t
    \n\t\t
    \n\t\t\t

    Baca juga: Express JS, Salah Satu Framework Node.js Yang Banyak Digunakan<\/a><\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Tailwind CSS, Framework CSS untuk Mengembangkan UI dengan Cepat Dalam pembuatan user interface sebuah website, seringkali Anda pasti menggunakan sebuah framework yang dapat\u00a0 memudahkanmu dalam menyesuaikan dan mempercantik sebuah website tanpa memerlukan logika pemrograman coding yang rumit. Framework dalam user interface website yang biasanya dikenal adalah bootstrap. Namun seiring berkembangnya zaman, framework yang digunakan pada [...]","protected":false},"author":32,"featured_media":21377,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wds_primary_category":300,"footnotes":""},"categories":[300],"tags":[460,459,461],"class_list":["post-21376","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pendidikan","tag-sejarah-tailwind-css","tag-tailwind-css","tag-tutorial-tailwind-css"],"_links":{"self":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/21376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/comments?post=21376"}],"version-history":[{"count":0,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/21376\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media\/21377"}],"wp:attachment":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media?parent=21376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/categories?post=21376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/tags?post=21376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}