Tailwind CSS Shadow Outline Colors: Dễ dàng Thêm Màu Box Shadows Sặc Sỡ

Tailwind CSS Shadow Outline Colors

Cài đặt

npm install tailwindcss-shadow-outline-colors

hoặc sử dụng nếu bạn đang sử dụng yarn

yarn add tailwindcss-shadow-outline-colors

Thêm plugin vào mảng plugins trong cấu hình Tailwind CSS của bạn.

plugins: [
    require('tailwindcss-shadow-outline-colors')()
]

Màu sắc

Theo mặc định, chúng tôi sử dụng biến colors từ cấu hình TailwindCSS của bạn. Nhưng nếu bạn muốn sử dụng các màu khác, bạn có thể thêm biến shadowOutlineColors vào cấu hình của bạn

// tailwind.config.js
module.exports = {
  theme: {
    shadowOutlineColors: {
        'primary': {
            500: '#EA4C89',
            600: '#D3447B',
            700: '#BE3D6F',
        },
    }
  },
  variants: {},
  plugins: [
    plugins: [ require('tailwindcss-shadow-outline-colors')() ]
  ],
}

Biến thể

Bạn có thể thêm hover, focus hoặc bất kỳ biến thể nào khác bằng cách đặt shadowOutline vào biến thể của bạn

// tailwind.config.js
module.exports = {
  theme: {},
  variants: {
    'shadowOutline': ['focus']
  },
  plugins: [
    plugins: [ require('tailwindcss-shadow-outline-colors')() ]
  ],
}

Bóng và Độ mờ

Bạn cũng có thể thay đổi kiểu bóng của bạn và độ mờ của màu sắc

// tailwind.config.js
module.exports = {
  theme: {
    shadowOutline: {
        'shadow': '0 0 0 0.2em',
        'alpha': '0.5'
    }
  },
  plugins: [
    plugins: [ require('tailwindcss-shadow-outline-colors')() ]
  ],
}

Chi tiết tải về:

Tác giả: octoper
Nguồn: https://github.com/octoper/tailwindcss-shadow-outline-colors

Giấy phép: MIT license