Menyiapkan Tailwind CSS Untuk Aplikasi Vue Js

Artikel ini menjelaskan cara mengkonfigurasi aplikasi vue.js Anda untuk mulai menggunakan tailwind class di Component Anda.

Tailwind adalah framework CSS dengan sejumlah gaya standar untuk desain yang lebih cepat.
Vue.js adalah kerangka kerja front-end yang sangat populer yang ditulis dalam javascript.

Jika Anda belum menginstal VueCLI di sistem Anda, gunakan npm untuk menginstalnya. (Buka situs web ini dan unduh npm dan node)

npm install -g @vue/cli

Sekarang mari kita gunakan vuecreate <app-name> untuk membuat aplikasi vue.js baru.

vue create vuejs-tailwind-app

Saat diminta, pilih vue2 atau vue3, versi mana yang lebih mudah bagi Anda, dan tekan Enter.

Setelah aplikasi berhasil dibuat, buka folder dan gunakan npm runserver untuk menjalankan aplikasi

cd vuejs-tailwind


npm run serve

Secara default, aplikasi Vue berjalan di port localhost 8080

Klik link http://localhost:8080/ untuk menampilkan aplikasi.

Sekarang mari kita instal dependensi yang diperlukan untuk mengoperasikan Tailwind.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Kemudian masukkan perintah berikut untuk menghasilkan file konfigurasi

npx tailwindcss init -p

Buka aplikasi di editor favorit Anda dan edit.

Di file tailwind.config.js,

Ganti pembersihan: []
Dengan pembersihan: ['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}']

Buat index.css di bawah folder src dan tambahkan berikut ini:

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Buat index.css di bawah folder src dan tambahkan berikut ini:

Mari tambahkan kelas Tailwind-CSS ke elemen dan uji fungsinya.

Mari tambahkan kelas text-pink-400 (ubah warna teks menjadi pink) ke elemen

file HelloWorld.vue di folder komponen.

Jalankan aplikasi dan pastikan semuanya berfungsi.

npm run serve

Catatan:

Saat meluncurkan aplikasi, kesalahan kompatibilitas berikut mungkin terjadi.

Untuk mengatasi masalah ini, Anda perlu menginstal versi tertentu dari paket yang kompatibel satu sama lain.

Pertama, jalankan perintah ini untuk menghapus paket yang sudah diinstal.

npm uninstall tailwindcss postcss autoprefixer

Kemudian jalankan perintah berikut untuk menginstal versi paket yang kompatibel.

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Untuk informasi lebih lanjut, silakan kunjungi tautan ini https://tailwindcss.com/docs/installation#post-css-7-compatibility-build

Jalankan aplikasi dan lihat apakah warna teks telah berubah.

Selamat! Sekarang Anda dapat mulai menerapkan gaya penarik di aplikasi Vue.js Anda.

Catatan: Jika Anda ingin menggunakan bidang formulir bergaya di aplikasi Anda, Anda perlu menginstal modul secara terpisah.

npm instal @tailwindcss/formulir

Selanjutnya, di tailwind.config.js, tambahkan plugin require ('@tailwindcss/forms').

Proyek Vue sederhana

Selanjutnya, mari buat halaman login sederhana menggunakan tiga komponen: bilah navigasi, wadah login, dan footer.

footer.vue

<template>
  <div class="w-100 bg-pink-800 text-white">
      <h4 class="text-center py-5">Sharmila S © 2021</h4>
  </div>
</template>

<script>
export default {
    name: 'Footer'
}
</script>

<style>
</style>

login.vue

<template>
  <div class="container w-80 mx-auto my-20 px-6 py-6 shadow">

      <h1 class="text-pink-600 font-bold font-sans text-4xl text-center">Login</h1>
      <div class="h-0.5 bg-gray-200 w-36 mx-auto mt-2.5"></div>
    <form action="" method="post">
        <div class="flex flex-col my-5">
            <label class="my-2" for="uname">Username</label>
            <input type="text" id="uname" name="uname" class="mt-1 mb-3 shadow-md border-none focus:ring-transparent rounded-sm bg-gray-100 text-pink-500" />
            <label class="my-2" for="psw">Password</label>
            <input type="password" id="psw" name="psw" class="mt-1 mb-3 shadow-md border-none focus:ring-transparent rounded-sm bg-gray-100 text-pink-500" />
        </div>
        <div class="text-center mt-3">
            <button type="reset" class="px-7 py-2 mx-2 font-semibold text-gray-800 bg-gray-100 rounded">Reset</button>
            <button type="submit" class="px-7 py-2 mx-2 font-semibold text-white bg-pink-600 rounded ">Submit</button>
        </div>
        
    </form>

  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

navbar.vue

<template>
  <ul class="text-right p-4 pr-4 font-semibold bg-gray-100">
      <li class="inline mx-2 text-pink-600 hover:text-pink-400 cursor-pointer" v-for="link in links" v-bind:key="link">{{link}}</li>
  </ul>
</template>

<script>
export default {
 name: 'Navbar',
 props: {
    links: [String]
 },
}
</script>

<style>
</style>

Sekarang setelah semua komponen siap, mari import ke App.vue

App.vue

<template>
  <Navbar v-bind:links="['Home', 'About', 'Contact']"/>
  <Login />
  <Footer />
</template>

<script>
import Navbar from './components/Navbar'
import Login from './components/Login'
import Footer from './components/Footer'
export default {
  name: 'App',
  components: {
    Navbar,
    Login,
    Footer
  }
}
</script>

<style>
</style>

Jalankan aplikasi dan akses http://localhost:8080 di browser Anda.

Sekarang saatnya untuk menambahkan sentuhan Anda sendiri ke aplikasi Anda dengan kelas penarik yang mudah digunakan.

Tautan Github :https://github.com/SharmilaS22/medium-vuejs-tailwind-setup

Sumber : https://medium.com/featurepreneur/set-up-tailwind-css-for-your-vue-js-app-5a8801fd0a55