在 tailwind.config.js 文件中自定义颜色

Question

我目前正在构建一个 VUE 应用程序。我需要在我的 tailwind.config.js 文件中将 litepie-datepicker 中的原色自定义为 #A7F3D0（翡翠系列）。

我试过这些代码。但是没有任何效果

'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: [],
}

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

提前致谢。

Answer 1

Litepie Datepicker 已经将 litepie-primary 设置为 emerald。你可以在他们的 Github repository

上查看

// 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'
         }
      }
    }
  }
}

在 tailwind.config.js 文件中自定义颜色

customize a color in tailwind.config.js file

datepicker

vue.js

tailwind-css

tailwind-in-js