Sử dụng Tailwind với Vue.js

Bài viết này giải thích cách thiết lập Tailwind để sử dụng trong dự án Vue CLI 3

Gió cùng chiềulà một khung CSS khá thú vị.

Trong bài đăng này, tôi sẽ hướng dẫn bạn cách sử dụng Tailwind (v1.0.5) trên ứng dụng Vue.

Đó là 4 bước đơn giản:

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

Cài đặt Tailwind

Bước đầu tiên là cài đặt Tailwind, sử dụng npm hoặc sợi:

# Using npm
npm install tailwindcss --save-dev

# Using Yarn yarn add tailwindcss --dev

Tạo tệp cấu hình

Tiếp theo, sử dụng lệnh Tailwind được cung cấp để tạo tệp cấu hình.

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

Điều này sẽ tạo ra mộttailwind.jstệp trong thư mục gốc của dự án của bạn, thêm cấu hình Tailwind cơ bản. Tệp rất dài và tôi sẽ không dán nó vào đây, nhưng nó chứa rất nhiều cài đặt trước sẽ rất hữu ích sau này.

Định cấu hình PostCSS

Bây giờ bạn cần điều chỉnhPostCSSđể đảm bảo Tailwind chạy. Thêm vào:

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

cho bạnpostcss.config.js. Tạo một cái nếu nó không tồn tại.

Lưu ý: nếu bạn đặt Vue CLI để lưu trữ cấu hình trongpackage.json, hãy đảm bảo rằng không có cấu hình PostCSS nào nằm trong tệp đó. Theo mặc định, Vue CLI thêm các dòng sau:

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

loại bỏ chúng, hoặc làpostcss.config.jstệp sẽ không được đọc.

Tạo tệp CSS

Bây giờ, hãy tạo một tệp CSS trongsrc/assets/css/tailwind.cssvà thêm

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

Nhập tệp vào ứng dụng Vue của bạn

Nhập tailwind trong main.js:

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

(@trong vue chỉ đếnsrc/)

Đó là nó! Bây giờ khởi động lại dự án Vue CLI của bạn và tất cả sẽ hoạt động tốt.

Kiểm tra nó hoạt động tốt

Bạn sẽ không nhận thấy bất cứ điều gì trừ khi bạn thêm các lớp dành riêng cho Tailwind.

Hãy thử thêm HTML này vào một trong các mẫu của bạn chẳng hạn:

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

Điều đó sẽ tạo ra một hộp màu.

Tải xuống miễn phí của tôiSổ tay Vue


Các hướng dẫn vue khác: