Cara Mengonfigurasi Aplikasi Vue js Anda Untuk Menggunakan Tailwind CSS

Apa itu TailwindCSS?

Tailwind adalah frame-work CSS yang memprioritaskan utilitas untuk membikin antar-muka pemakai custom secara cepat. Tailwind berlainan dari frame-work seperti Bootstrap, Foundation, atau Bulma karena ini bukanlah kit UI. Itu tidak mempunyai topik standar, dan tidak ada elemen UI bawaan. Di lain sisi, itu pun tidak berpendapat mengenai bagaimana situs Anda semestinya kelihatan dan tidak memaksa keputusan design yang perlu Anda perjuangkan untuk dibatalkan.

Pada dasarnya, Tailwind memberikan Anda kendalian penuh atas bagaimana website Anda dan tidak digabungkan dengan "sampah" yang tidak Anda butuhkan dalam project Anda.

Mari lanjutkan menggunakan Tailwindcss di project vue kita.

Buat project Vue baru

Buka terminal Anda dan tulis perintah berikut

vue init myProjectName jika Anda menggunakan Vue 2 CLI atau vue create myProjectName untuk Vue 3

cd myProjectName untuk mengubah ke direktori proyek.

Instal penarik menggunakan npm

npm install tailwindcss --save-dev

or using yarn

yarn add tailwindcss --dev

Buat file konfigurasi Tailwind.js

Ketik berikut untuk membuattailwind.js file konfigurasi

./node_modules/.bin/tailwind init tailwind.js

atau

npx tailwind init tailwind.config.js --full

Konfigurasi PostCSS

Buat file postcss.config.jstouch postcss.config.js

Kemudian teruskan untuk mengonfigurasikan Postcss untuk mengolah penarik angin, Lakukan itu dengan menambah kode berikut ke filepostcss.config.jsfile

module.exports = {
     "plugins": [
          require('tailwindcss')('tailwind.js'),
          require('autoprefixer')(),
     ]
}

Hapus semua konfigurasi penarik dari package.json

Hapus baris kode berikut dari filepackage.jsonfile

{},
"postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
{}

Buat file CSS

Navigasi kesrc/assets/css dan buat yang barutailwind.css file di folder css Anda, lalu tambahkan yang berikut ini

@tailwind base;
@tailwind components;
@tailwind utilities;

Impor Tailwind ke aplikasi vue Anda

Buka file main.js Anda dan tambahkan:

import '@/assets/css/tailwind.css'

Tes bahwa itu memiliki fungsi

Ubah file namanya Helloworld.vue di folder views dan tambah kode berikut antara tag template:

<div class=" container mx-auto py-10">
            <div class="border m-6 rounded-lg  bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
               <div class="sm:flex sm:items-center px-6 py-4">
                    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://api.adorable.io/avatars/196/[email protected]" alt="">
                         <div class="text-center sm:text-left sm:flex-grow">
                         <div class="mb-4">
                         <p class="text-xl leading-tight">Jane Doe</p>
                              <p class="text-sm leading-tight text-grey-dark">Software Developer at SpongeBob LLC.</p>
                         </div>
                        <div class="flex flex-wrap">
                         <button class=" text-xs font-semibold rounded-full px-4 py-1 mx-3  leading-normal bg-white border border-blue text-blue hover:bg-blue hover:text-white">Call</button>
                         <button class="  text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
                         </div>
                         </div>
                 </div>
            </div>
       </div>