定制颜色

定制颜色

定制好颜色后点击导出，选择需要的格式复制。

自定义颜色（覆盖默认颜色）

在TailwindCSS中使用自定义的，可以再theme.colors中加入自定义颜色，这样会覆盖默认颜色。

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {},
    colors:{
      "transparent": 'transparent',
      "current": 'currentColor',
      "white":"#ffffff",
      'salmon': {
        '50': '#fff0eb',
        '100': '#ffe3d6',
        '200': '#fec0a9',
        '300': '#fd855d',
        '400': '#fb5f3c',
        '500': '#f93715',
        '600': '#e91f0c',
        '700': '#c0120c',
        '800': '#9b1212',
        '900': '#7d1214',
        '950': '#45070a',
    },
    }
  }
}

添加新的颜色

若不想覆盖默认颜色，可以在theme.extend.colors中添加自定义颜色

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors:{
        "transparent": 'transparent',
        "current": 'currentColor',
        "white":"#ffffff",
        'salmon': {
          '50': '#fff0eb',
          '100': '#ffe3d6',
          '200': '#fec0a9',
          '300': '#fd855d',
          '400': '#fb5f3c',
          '500': '#f93715',
          '600': '#e91f0c',
          '700': '#c0120c',
          '800': '#9b1212',
          '900': '#7d1214',
          '950': '#45070a',
      }
    }
    }
  },
}

使用默认颜色

通过导入你的配置文件并选择要使用的颜色

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')
export default {
  theme: {
    extend: {},
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.gray,
      emerald: colors.emerald,
      indigo: colors.indigo,
      yellow: colors.yellow,

    }
  }
}