استخدام Tailwind مع Vue.js

تشرح هذه المقالة كيفية إعداد Tailwind للاستخدام في مشروع Vue CLI 3

الريح الخلفيةهو إطار عمل CSS رائع جدًا.

سأوضح لك في هذا المنشور كيفية استخدام Tailwind (v1.0.5) على تطبيق Vue.

إنها أربع خطوات بسيطة:

In this post I assume the project you want to use Tailwind on is based on Vue CLI 3.

ثبّت Tailwind

الخطوة الأولى هي تثبيت Tailwind ، باستخدام npm أو الغزل:

# Using npm
npm install tailwindcss --save-dev

# Using Yarn yarn add tailwindcss --dev

قم بإنشاء ملف التكوين

بعد ذلك ، استخدم أمر Tailwind المتوفر لإنشاء ملف تكوين.

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

سيؤدي هذا إلى إنشاء ملفtailwind.jsملف في جذر مشروعك ، مع إضافة تكوين Tailwind الأساسي. الملف طويل جدًا ، ولن ألصقه هنا ، لكنه يحتوي على الكثير من الإعدادات المسبقة التي ستكون مفيدة جدًا لاحقًا.

تكوين PostCSS

الآن أنت بحاجة إلى تعديل ملفPostCSSللتأكد من تشغيل Tailwind. يضيف:

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

لكpostcss.config.js. قم بإنشاء واحد إذا لم يكن موجودًا.

ملاحظة: إذا قمت بتعيين Vue CLI لتخزين التهيئة بتنسيقpackage.json، تأكد من عدم وجود تكوين PostCSS في هذا الملف. بشكل افتراضي ، يضيف Vue CLI هذه الأسطر:

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

احذفهم، أو الpostcss.config.jsلن يتم قراءة الملف.

قم بإنشاء ملف CSS

الآن قم بإنشاء ملف CSS بتنسيقsrc/assets/css/tailwind.cssو أضف

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

قم باستيراد الملف في تطبيق Vue الخاص بك

استيراد Tailwind في main.js:

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

(@في vue يشير إلىsrc/)

هذا هو! أعد تشغيل مشروع Vue CLI الآن ويجب أن يعمل كل شيء بشكل جيد.

اختباره يعمل بشكل جيد

لن تلاحظ أي شيء ما لم تضيف فئات خاصة بـ Tailwind.

جرب على سبيل المثال إضافة HTML هذا في أحد النماذج الخاصة بك

<div class="bg-purple text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">
  Test
</div>

يجب أن يخلق صندوقًا ملونًا.

تحميل مجانيكتيب Vue


المزيد من دروس vue: