Halo teman-teman semuanya, di artikel sebelumnya kita sudah berhasil menginstall dan menjalankan project Vue Js, di artikel kali ini kita semua akan belajar bagaimana cara installasi dab konfigurasi Tailwind CSS di dalam project Vue Js.
Apa itu Tailwind CSS ?
Rapidly build modern websites without ever leaving your HTML.
A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
Tailwind CSS merupakan CSS framework yang difokuskan ke dalam sebuah utilities yang di kemas dengan class-class seperti flex, pt-4, text-center dan lain-lain.
Tailwind CSS sangat populer sekali saat ini, kita bisa melihat statistik dari penggunaan Tailwind CSS yang meloncat sangat tinggi jika dibandingkan dengan framework CSS lain di tahun 2019 dan 2020.
statistik di tahun 2019
Sumber : https://2019.stateofcss.com/technologies/css-frameworks/
Statistik di tahun 2020
Sumber : https://2020.stateofcss.com/en-US/technologies/css-frameworks/
Dari gambar statistik di atas, kita bisa ambil kesimpulan bahwa Tailwind memang sangat populer dan banyak digunakan untuk saat ini, maka kita juga akan mencoba menggunakan Tailwind CSS di dalam project Vue Js.
Langkah 1 - Installasi Tailwind CSS
Sekarang, kita akan belajar bagaimana cara mengintegrasikan project Vue Js dengan Tailwind CSS, silahkan jalankan perintah di bawah ini di dalam project Vue Js:
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
Silahkan tunggu proses installasi Tailwind CSS sampai selesai.
Langkah 2 - Konfigurasi Tailwind CSS di Vue Js
Setelah proses installasi selesai, sekarang kita lanjutkan untuk melakukan konfigurasi Tailwind CSS di dalam project Vue Js, silahkan jalankan perintah berikut ini :
npx tailwindcss init -p
Perintah di atas digunakan untuk melakukan generate file konfigurasi dari Tailwind, yaitu : tailwind.config.js dan postcss.config.js.
Sekarang, kita lanjutkan agar Tailwind CSS dapat digunakan secara global di dalam project Vue Js, silahkan buat file baru dengan nama index.css di dalam folder src. Kemudian masukkan kode berikut ini :
/*! @import */
@tailwind base;
@tailwind components;
@tailwind utilities;
Setelah itu, kita import file terssebut di dalam file src/main.js, kurang lebih seperti berikut ini :
import { createApp } from 'vue'
import App from './App.vue'
import './index.css' // <-- Tailwind CSS
createApp(App).mount('#app')
Sekarang, silahkan restart server Vue Js terlebih dahulu.
Langkah 3 - Testing Tailwind CSS di Vue Js
Sekarang, kita akan uji coba membuat tampilan menggunakan Tailwind CSS, silahkan buka file src/App.vue, kemudian ubah semua kodenya menjadi seperti berikut ini :
<template>
<div class="p-4 bg-gray-600 shadow-sm text-center text-white">
VUE - TAILWIND CSS - RAJA ONGKIR - SANTRIKODING.COM
</div>
</template>
<script>
export default {
}
</script>
<style>
body {
background: lightgrey !important;
}
</style>
Di atas, kita membuat sebuah div dengan class :
Sekarang, jika di jalankan kurang lebih hasilnya seperti berikut ini :
Sampai disini pembasan bagaimana cara installasi dan konfigurasi Tailwind CSS di dalam project Vue Js, kita juga telah belajar membuat basic kode dengan Tailwind CSS, di artikel selanjutnya kita akan belajar bagaimana cara mengintegrasikan API Laravel dan RajaOngkir di dalam project Vue Js dan kita akan menggunakan Tailwind CSS untuk membuat layoutnya.
Terima Kasih
INFO :