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.
Rapidly build modern websites without ever leaving your HTML.
A utility-first CSS framework packed with classes like
flex
,pt-4
,text-center
androtate-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.
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.
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.
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 :
p-4
: untuk pandding 1 rem (https://tailwindcss.com/docs/padding)bg-gray-600
: untuk membuat backgroun dengan warna gray 600 (https://tailwindcss.com/docs/background-color#class-reference)shadow
: untuk memberikan efek box shadow (https://tailwindcss.com/docs/box-shadow)text-center
: untuk membuat text berada di tengah (https://tailwindcss.com/docs/text-align)text-white
: untuk membuat text berwarna putih (https://tailwindcss.com/docs/text-color#class-reference)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 :
- Membangun Website Sekolah Dengan Laravel, Vue Js dan Bootstrap 5 : https://bit.ly/ebook-laravel-vue-js
- Membangun Toko Online Dengan Laravel, Vue Js dan Payment Gateway : https://bit.ly/lp-ebook-laravel-vue-payment-gateway
Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami