1

我目前正在构建一个 VUE 应用程序。我需要在我的tailwind.config.js 文件中将litepie-datepicker中的原色自定义为#A7F3D0(emerald series)。

在此处输入图像描述

我试过这些代码。但没有任何工作

'litepie-primary':'#A7F3D0', // color system for light mode
'litepie-secondary': colors.coolGray // color system for dark mode

 'litepie-primary': colors.emerald[200], // color system for light mode
 'litepie-secondary': colors.coolGray // color system for dark mode

这是我的 tailwind.config.js 文件

const path = require('path');
const colors = require('tailwindcss/colors');

module.exports = {
  purge: [
    "./src/**/*.php",
    "./src/**/*.html",
    "./src/**/*.vue",
    "./resources/**/*.php",
    "./resources/**/*.html",
    "./node_modules/@left4code/tw-starter/**/*.js",
    path.resolve(__dirname, './node_modules/litepie-datepicker/**/*.js')
  ],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      width: {
        '1/7': '14.2857143%',
      },
      colors: {
        'primary': '#00a69c',
        'secondary': '#343a40',
        
        
        'litepie-primary': colors.emerald, // color system for light mode
        'litepie-secondary': colors.coolGray // color system for dark mode
      }
    },
  },
  variants: {
    extend: {
      cursor: ['disabled'],
      textOpacity: ['disabled'],
      textColor: ['disabled']
    },
  },
  plugins: [],
}

我已经在 StackOverflow 上搜索了问题，但没有找到令人满意的答案。我希望有人回答这个问题。

先感谢您。

4

1 回答 1

1

Litepie Datepicker 已设置litepie-primary为emerald. 您可以在他们的Github 存储库中查看它

// lines 20, 21
'litepie-primary': colors.emerald,
'litepie-secondary': colors.coolGray

作为原色（所选日期的颜色），他们使用litepie.primary[500]的是rgb(16, 185, 129). 我猜你需要改变这种颜色。我将仅显示与您的配置的颜色部分相关的内容

const colors = require('tailwindcss/colors');

// Change '500' key. To make it noticeable I'll change it to red
colors.emerald[500] = 'red';

module.exports = {
  ...
  theme: {
    extend: {
      colors: {
        'litepie-primary': colors.emerald
      }
    }
  }
  ...
}

让我们检查

<div class="text-litepie-primary-50">50</div>
<div class="text-litepie-primary-100">100</div>
<div class="text-litepie-primary-200">200</div>
<div class="text-litepie-primary-300">300</div>
<div class="text-litepie-primary-400">400</div>
<div class="text-litepie-primary-500">500 This should be red</div>
<div class="text-litepie-primary-600">600</div>
<div class="text-litepie-primary-700">700</div>
<div class="text-litepie-primary-800">800</div>
<div class="text-litepie-primary-900">900</div>

要做到这一点，#A7F3D0您可以直接将其作为字符串或默认颜色传递

// colors.emerald[500] = '#A7F3D0';
colors.emerald[500] = colors.emerald[200];

或者，如果您希望将整个托盘更改为您的海关，请提供带有 Tailwind 密钥的对象

module.exports = {
  theme: {
    extend: {
      colors: {
        'litepie-primary': {
           50: '#color50',
           100: '#color100',
           ...
           900: '#color900'
         }
      }
    }
  }
}
于 2021-07-09T19:00:50.160 回答