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

【问题标题】：customize a color in tailwind.config.js file在 tailwind.config.js 文件中自定义颜色
【发布时间】：2021-09-20 01:35:07
【问题描述】：

我目前正在构建一个 VUE 应用程序。我需要将 litepie-datepicker 中的原色自定义为我的tailwind.config.js 文件中的#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 上搜索了问题，但没有找到令人满意的答案。我希望有人回答这个问题。

提前谢谢你。

【问题讨论】：

标签： vue.js datepicker tailwind-css tailwind-in-js

【解决方案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'
         }
      }
    }
  }
}

【讨论】：