Gridsome Tailwind CSS Plugin: Xây Dựng Trang Nhanh Chóng, Tối Ưu Hóa

🚨 Nếu bạn gặp lỗi về PostCSS v8, hãy kiểm tra tài liệu của Tailwind để biết thông tin mới nhất về compat version .

gridsome-plugin-tailwindcss

Plugin này sẽ thêm Tailwind vào dự án Gridsome của bạn.

Đối tượng Sử Dụng

Nếu bạn muốn thiết lập Tailwind với ít công sức nhất trong một dự án Gridsome, thì đây là dành cho bạn. Nếu bạn muốn theo Con đường của Tailwind —sử dụng tailwind.config.js hoặc giữ CSS trong khối kiểu của tệp Vue— thì đây là plugin dành cho bạn. Nếu bạn muốn có một tệp CSS toàn cục và thả một loạt thứ vào đó, bạn nên tìm nơi khác.

Cài Đặt

npm install -D gridsome-plugin-tailwindcss tailwindcss@latest

npm install -D postcss-import postcss-preset-env #(nếu bạn muốn sử dụng các plugin này và bạn đã cập nhật cấu hình)

Sử Dụng

Tôi đã tự động nhập tệp tailwind.css mặc định từ gói npm của Tailwind. Điều này chỉ thêm một tệp CSS bao gồm:

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

Bạn không cần phải nhập Tailwind vào một tệp CSS.

Bạn có thể tự hỏi, “Tôi phải thêm CSS toàn cục ở đâu?!” Câu trả lời ngắn là bạn không cần. Câu trả lời dài là hãy đọc tài liệu Tailwind về creating plugins và sử dụng tailwind.config.js để thêm kiểu cơ bản và tạo các thành phần/công cụ ở đó.

Nếu bạn cần tạo**tailwind.config.js**, chạy lệnh**./node_modules/.bin/tailwind init** để tạo một tệp.

Tùy Chỉnh

Đặt bất kỳ tùy chọn nào bạn muốn trong gridsome.config.js.

module.exports = {
  plugins: [
    {
      use: "gridsome-plugin-tailwindcss",
      /**
      * These are the default options.

      options: {
        tailwindConfig: './tailwind.config.js',
        presetEnvConfig: {},
        shouldImport: false,
        shouldTimeTravel: false
      }
      */
    },
  ],
};

Nếu bạn không cung cấp đường dẫn tới tệp cấu hình, mặc định của Tailwind sẽ được sử dụng.

Các Plugin

Các plugin PostCSS sau có thể được kích hoạt nếu bạn cài đặt các phụ thuộc của chúng.

postcss-import

Cài đặt postcss-import và truyền shouldImport: true để kích hoạt.

postcss-preset-env

Cài đặt postcss-preset-env và truyền shouldTimeTravel: true để kích hoạt. Bạn cũng có thể truyền một đối tượng cấu hình cho plugin như presetEnvConfig.

Với một plugin này, bạn sẽ sẵn sàng sử dụng Tailwind ngay. Hãy giữ tùy chỉnh của bạn trong tailwind.config.js khi có thể, nhưng bạn có thể sử dụng toàn bộ sức mạnh của Tailwind trong các thành phần Vue của bạn khi cần.

Ví dụ

• 🍸 Aperitif — A delectable starter template for your next Gridsome project.
• Example project

Chúc bạn viết mã vui vẻ!

Chi tiết tải về:

Tác giả: brandonpittman
Nguồn: https://github.com/brandonpittman/gridsome-plugin-tailwindcss

Giấy phép: MIT license