Tailwind CSS telah menjadi pilihan utama bagi developer yang menginginkan fleksibilitas desain tanpa menulis CSS berulang. Pada panduan ini, kami akan membimbing Anda langkah demi langkah membuat website responsif yang sesuai dengan identitas modern APA ITU.<\/p>\n
sm:<\/code>, md:<\/code>, lg:<\/code>, xl:<\/code> memudahkan pengaturan breakpoint.<\/li>\n- Customizable<\/strong>: File konfigurasi
tailwind.config.js<\/code> memungkinkan penyesuaian warna, spacing, dan typography.<\/li>\n- Performance<\/strong>: Purge CSS menghilangkan kelas yang tidak terpakai, menghasilkan bundle file kecil.<\/li>\n<\/ul>\n
Langkah 1: Persiapan lingkungan<\/h2>\n\n- Pastikan Node.js (versi 18+) terinstall.<\/li>\n
- Buat folder proyek:
mkdir apaitu-website && cd apaitu-website<\/code><\/li>\n- Inisialisasi npm:
npm init -y<\/code><\/li>\n- Install Tailwind dan dependensinya:
npm install -D tailwindcss postcss autoprefixer<\/code><\/li>\n- Generate file konfigurasi:
npx tailwindcss init -p<\/code><\/li>\n<\/ol>\nLangkah 2: Konfigurasi Tailwind<\/h2>\n
Edit tailwind.config.js<\/code> untuk menambahkan path ke file template WordPress (PHP) sehingga purge bekerja secara optimal:<\/p>\nmodule.exports = {\n content: [\n \".\/**\/*.php\",\n \".\/src\/**\/*.js\",\n \".\/src\/**\/*.jsx\",\n ],\n theme: {\n extend: {\n colors: {\n primary: \"#1A73E8\",\n secondary: \"#F5F5F5\",\n },\n },\n },\n plugins: [],\n};\n<\/code><\/pre>\nLangkah 3: Buat file CSS utama<\/h2>\n
Buat file src\/styles.css<\/code> dengan isi berikut:<\/p>\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n<\/code><\/pre>\nLangkah 4: Build CSS<\/h2>\n
Tambahkan script build pada package.json<\/code>:<\/p>\n\"scripts\": {\n \"build\": \"npx tailwindcss -i .\/src\/styles.css -o .\/public\/css\/tailwind.css --minify\"\n}\n<\/code><\/pre>\nJalankan npm run build<\/code>. File tailwind.css<\/code> siap di\u2011enqueue di WordPress.<\/p>\nLangkah 5: Enqueue di tema WordPress<\/h2>\nfunction apaitu_enqueue_styles() {\n wp_enqueue_style( 'tailwind', get_template_directory_uri() . '\/public\/css\/tailwind.css', [], null );\n wp_enqueue_style( 'apaitu-style', get_stylesheet_uri(), ['tailwind'], wp_get_theme()->get('Version') );\n}\nadd_action( 'wp_enqueue_scripts', 'apaitu_enqueue_styles' );\n<\/code><\/pre>\nLangkah 6: Membuat layout responsif<\/h2>\nHeader dengan navigation<\/h3>\n<header class=\"bg-primary text-white py-4 shadow-md\">\n <div class=\"container mx-auto flex justify-between items-center px-4\">\n <h1 class=\"text-2xl font-semibold\">APA ITU<\/h1>\n <nav class=\"hidden md:flex space-x-6\">\n <a href=\"\/\" class=\"hover:underline\">Beranda<\/a>\n <a href=\"\/kategori\/teknologi\" class=\"hover:underline\">Teknologi<\/a>\n <a href=\"\/kategori\/panduan\" class=\"hover:underline\">Panduan<\/a>\n <\/nav>\n <button class=\"md:hidden\" aria-label=\"Menu\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"> ... <\/svg>\n <\/button>\n <\/div>\n<\/header>\n<\/code><\/pre>\nArtikel grid responsif<\/h3>\n<section class=\"container mx-auto px-4 py-8\">\n <div class=\"grid gap-6 grid-cols-1 sm:grid-cols\u20112 lg:grid\u2011cols\u20113\">\n <article class=\"bg-white rounded-lg shadow-sm overflow-hidden\">\n <img src=\"\/images\/seo.jpg\" alt=\"SEO\" class=\"w-full h-48 object-cover\">\n <div class=\"p-4\">\n <h2 class=\"text-xl font-bold mb-2\">Apa itu SEO<\/h2>\n <p class=\"text-gray-600\">Penjelasan singkat tentang optimasi mesin pencari...<\/p>\n <a href=\"\/apa-itu-seo\" class=\"text-primary hover:underline mt-2 block\">Baca selengkapnya<\/a>\n <\/div>\n <\/article>\n \n <\/div>\n<\/section>\n<\/code><\/pre>\nTips responsif lanjutan<\/h2>\n\n- Gunakan
aspect\u2011ratio<\/code> utility (mis. aspect\u2011video<\/code>) untuk mempertahankan rasio elemen media.<\/li>\n- Manfaatkan
space\u2011x\u20114<\/code> dan space\u2011y\u20114<\/code> untuk mengatur spasi secara konsisten.<\/li>\n- Gunakan dark mode dengan
dark:<\/code> prefix jika ingin menambahkan tema gelap.<\/li>\n<\/ul>\nDeploy ke produksi<\/h2>\n
Setelah selesai, jalankan npm run build<\/code> lagi untuk menghasilkan CSS minified. Upload folder public<\/code> ke server WordPress dan pastikan enqueue berfungsi di lingkungan produksi.<\/p>\nKesimpulan<\/h2>\n
Tailwind CSS memudahkan pembuatan tampilan modern, bersih, dan responsif yang sejalan dengan identitas APA ITU. Dengan mengikuti panduan ini, Anda dapat menghasilkan situs yang cepat, SEO\u2011friendly, dan siap bersaing di pasar pendidikan digital Indonesia.<\/p>\n","protected":false},"excerpt":{"rendered":"
Pelajari cara membangun tampilan modern yang responsif menggunakan Tailwind CSS, dari setup awal hingga deployment di WordPress.<\/p>\n","protected":false},"author":1,"featured_media":80,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40,9],"tags":[41,42,43],"class_list":["post-55","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desain-web","category-tutorial","tag-responsive-design","tag-tailwind-css","tag-wordpress-theme"],"_links":{"self":[{"href":"https:\/\/apaituai.web.id\/index.php?rest_route=\/wp\/v2\/posts\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/apaituai.web.id\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/apaituai.web.id\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/apaituai.web.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/apaituai.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=55"}],"version-history":[{"count":0,"href":"https:\/\/apaituai.web.id\/index.php?rest_route=\/wp\/v2\/posts\/55\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/apaituai.web.id\/index.php?rest_route=\/wp\/v2\/media\/80"}],"wp:attachment":[{"href":"https:\/\/apaituai.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=55"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/apaituai.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=55"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/apaituai.web.id\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}