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-centerandrotate-90that 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 :
-
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
-
Tutorial Rajaongkir dengan Laravel, Vue Js dan Tailwind CSS#1 : Installasi Project Laravel
Tutorial Rajaongkir dengan Laravel, Vue Js dan Tailwind CSS#2 : Integrasi Laravel dengan RajaOngkir
Tutorial Rajaongkir dengan Laravel, Vue Js dan Tailwind CSS#3 : Installasi Project Vue Js
Tutorial Rajaongkir dengan Laravel, Vue Js dan Tailwind CSS#4 : Installasi Tailwind CSS
Tutorial Rajaongkir dengan Laravel, Vue Js dan Tailwind CSS#5 : Integrasi Rajaongkir dengan Vue Js
KOMENTAR
ARTIKEL TERKAIT
TAGS
Laravel CodeIgniter Ruby on Rails Vue JS React JS PHP HTML API CSS Text Editor CodeIgniter 4 Git JavaScript Ruby Server Database Bootstrap Nginx DevOps Apache Lumen Ajax JSON Express JS MySQL Adonis JS Node JS CentOS Ubuntu Python Vue Router SPA Axios RajaOngkir Package Socialite Livewire Golang Jetstream Fortify Composition API Composer Tailwind CSS Django Nuxt Js
Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami