Babel Plugin Tailwind Dark: Thêm Chế Độ Tối vào Tailwind CSS bằng Babel

babel-plugin-tailwind-dark

Một plugin Babel để thêm lớp tùy chỉnh cho chế độ tối khi biên dịch mã của bạn bằng Babel.

Sử dụng

Cài đặt plugin trước tiên:

npm install babel-plugin-tailwind-dark --save-dev

Thêm plugin vào tập tin .babelrc của bạn với tùy chọn chế độ tối tùy chỉnh:

{
  "plugins": [
    ["tailwind-dark", {
      "dark": {
        "bg-white": "bg-gray-800",
        "text-gray-900": "text-white"
      }
    }]
  ]
}

Enable dark mode in tailwind

Ví dụ

Example repo

Biến đổi

<div className="bg-white">
  <h1 className="text-gray-900">Dark mode is here!</h1>
</div>

thành

<div className="bg-white dark:bg-gray-800">
  <h1 className="text-gray-900 dark:text-white">Dark mode is here!</h1>
</div>

Sản phẩm

Nếu purge được kích hoạt, bạn cần thêm các tên lớp chế độ tối vào safelist

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    options: {
      safelist: ['dark:bg-gray-800', 'dark:text-white'],
    }
  },
}

Yêu cầu

• tailwind 2
• React

Chi tiết tải về:

Tác giả: wowlusitong
Nguồn: https://github.com/wowlusitong/babel-plugin-tailwind-dark

Giấy phép: MIT license