Downwind CSS Text Decoration: Tùy chỉnh Trang Trí Văn bản – Có thể Kết hợp

@downwindcss/text-decoration

LƯU Ý : Không còn được sử dụng cho Tailwind CSS phiên bản 3.x.
vì TW hiện đã cung cấp những chức năng này sẵn trong hộp.

• Màu Trang Trí Văn bản – https://tailwindcss.com/docs/text-decoration-color
• Kiểu Trang Trí Văn bản – https://tailwindcss.com/docs/text-decoration-style
• Độ Dày Trang Trí Văn bản – https://tailwindcss.com/docs/text-decoration-thickness
• Độ Dịch Chữ Dưới Trang Trí – https://tailwindcss.com/docs/text-underline-offset

Một Plugin Tailwind CSS cho tiện ích text-decoration.

Plugin này có thể kết hợp (Composing the Uncompsable with CSS Variables) và có thể thêm nhiều tiện ích decoration-line (để thêm dưới/ở trên và gạch ngang cùng nhau. Xem phần “Sử dụng” bên dưới)

Cài đặt

npm install @downwindcss/text-decoration
# for Yarn users
yarn add @downwindcss/text-decoration

Cấu hình

Thêm plugin vào tailwind.config.js trong Plugins section.

// tailwind.config.js
module.exports = {
  plugins: [require('@downwindcss/text-decoration')],
};

TL;DR (Tóm tắt)

Ví dụ : https://play.tailwindcss.com/fm4Vucj6IG

Dưới đây là tất cả các tiện ích có sẵn

Tiện ích

Sử dụng

Để kích hoạt các tiện ích text-decoration, bạn cần thêm lớp .text-decoration.

Riêng nó không áp dụng bất kỳ kiểu dáng nào tương tự như cách tiện ích tích hợp sẵn Transform không áp dụng bất kỳ biến đổi nào.

<h2 class="text-decoration">Header</h2>

text-decoration-line

Tiện ích để áp dụng các dòng.
MDN: decoration-line

Sử dụng no-underline của Tailwind CSS để loại bỏ trang trí văn bản.

CỘNG ĐỒNG CÔNG NHẬN: Ảnh chụp màn hình trên decoration-line do Mozilla Contributrors cấp phép theo CC-BY-SA 2.5

gạch dưới.

<p>
  I'd far rather be
  <span class="text-decoration text-decoration-underline">
    happy than right
  </span>
  any day.
</p>

gạch trên.

<p>
  I'd far rather be
  <span class="text-decoration text-decoration-overline">
    happy than right
  </span>
  any day.
</p>

gạch ngang.

<p>
  I'd far rather be
  <span class="text-decoration text-decoration-through">
    happy than right
  </span>
  any day.
</p>

LƯU Ý : Nó không phải là decoration-line-line-through ngay cả khi CSS đã áp dụng là decoration-line: line-through;

gạch dưới + gạch trên + gạch ngang

<p>
  I'd far rather be
  <span
    class="
        text-decoration 
        text-decoration-overline 
        text-decoration-underline 
        text-decoration-line-through"
  >
    happy than right
  </span>
  any day.
</p>

text-decoration-color

Tất cả màu sắc Tailwind CSS VÀ màu sắc mở rộng của bạn đều có sẵn.

Bạn có thể mở rộng các màu trang trí bằng cách mở rộng textDecorationPlugin.colors.

Mở rộng màu sắc trong tailwind.config.js

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      textDecorationPlugin: {
        colors: {
          primary: 'tomato',
          secondary: 'gold',
        },
      },    },
  },
  variants: {},
  plugins: [textDecorationPlugin],
}

Và sử dụng chúng trong mã HTML của bạn.

<h1 class="
    text-decoration 
    text-decoration-underline 
    text-decoration-overline 
    text-decoration-line-through 
    text-decoration-wavy
    text-decoration-primary
    text-decoration-2">
    Header
</h1>

Nếu bạn mở rộng màu sắc, các màu đã mở rộng sẽ có sẵn cho plugin.

const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    extend: {
      colors: {
        'light-blue': colors.lightBlue,
      },
      textDecorationPlugin: {
        colors: {
          primary: 'tomato',
        },
      },
    },
  },
  variants: {},
  plugins: [textDecorationPlugin],
}

Và sử dụng chúng trong mã HTML của bạn.

<h1 class="
    text-decoration 
    text-decoration-underline 
    text-decoration-overline 
    text-decoration-line-through 
    text-decoration-wavy
    text-decoration-light-blue-300
    text-decoration-2">
    Header
</h1>

text-decoration-style

Bạn có thể sử dụng các kiểu dáng sau đây text-decoration-style.

text-decoration-thickness

Khi bạn gõ decoration-{độ dày: số}, text-decoration-thickness sẽ được áp dụng.

Ví dụ, decoration-2 sẽ áp dụng độ dày 2px

<h1 class="
    text-decoration 
    text-decoration-underline 
    text-decoration-overline 
    text-decoration-line-through 
    text-decoration-wavy
    text-decoration-primary
    text-decoration-2">
    Header
</h1>

Các giá trị có sẵn là,

Bạn có thể mở rộng độ dày bằng cách cập nhật cấu hình, thuộc tính textDecorationPlugin.thicknesses.

module.exports = {
  theme: {
    extend: {
      textDecorationPlugin: {
        thicknesses: {
          '0.2rem': '0.2rem',
        },
      },
    },
  },
  variants: {},
  plugins: [textDecorationPlugin],
}

Và sử dụng nó như decoration-0.2rem.

Xóa Trang Trí

Sử dụng decoration-none.

Tiện Ích Trùng Lặp

Có thể thực hiện các text-decoration sau đây bằng Tailwind CSS utilities cơ bản nhưng cũng được thêm vào plugin này để cho phép tính kết hợp.

. gạch dưới: text-decoration: underline;
. gạch ngang: text-decoration: line-through;
. không gạch: text-decoration: none;

Tài nguyên

• Nguồn: downwindcss/text-decoration
• NPM: https://www.npmjs.com/package/@downwindcss/text-decoration

Ngữ cảnh

Dựa trên ý tưởng đã đăng trong cuộc thảo luận về Tailwind CSS, https://github.com/tailwindlabs/tailwindcss/discussions/3749

Plugin này cung cấp các thuộc tính Tailwind CSS text-decoration* bị thiếu dưới dạng một plugin.

Chi tiết tải về:

Tác giả: downwindcss
Nguồn: https://github.com/downwindcss/text-decoration

Giấy phép: MIT license