• Apa itu Tailwind CSS ?
• Langkah 1 - Installasi Tailwind CSS
• Langkah 2 - Konfigurasi Tailwind CSS di Vue Js
• Langkah 3 - Testing Tailwind CSS di Vue Js

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 :

• 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