Tailwind CSS 颜色

2022-07-28 10:23 更新

自定义颜色

为您的项目定制默认调色盘。


Tailwind 包含一个专业制作的开箱即用的默认调色板,如果您没有自己的特定品牌,这是一个很好的起点。


但是当您需要定制您的调色板时,您可以在您的 ​tailwind.config.js​ 文件的 ​theme ​部分的 ​colors ​键下配置您的颜色。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}

当涉及到建立一个自定义调色板时,您可以从我们丰富的调色板中 策划您的颜色,或者通过直接添加您的特定颜色值 [配置您自己的自定义颜色] (#custom-colors)。

策划颜色

如果您没有一套完全自定义的颜色,您可以从我们完整的调色板中策划您的颜色,只需要将 ​'tailwindcss/colors'​ 导入您的配置文件中,然后选择您喜欢的颜色。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
    }
  }
}

如果您希望让这些在项目中可用,请不要忘记包含 ​transparent ​和 ​current ​。(Don’t forget to include transparent and current if you’d like those available in your project.)

尽管每种颜色都有一个特定的名称,但我们鼓励您在自己的项目中随意给它们起别名。我们甚至在默认配置中执行此操作,将 ​coolGray ​别名为 ​gray​,将 ​violet ​别名为 ​purple​,将 ​amber ​别名为 ​yellow​,将 ​emerald ​别名为 ​green​。

自定义颜色

您可以添加自己的颜色值来建立一个完全自定义的调色板。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    }
  }
}

默认情况下,这些颜色会被所有颜色驱动的功能类自动共享,如 ​textColor​、​backgroundColor​、​borderColor ​等。

颜色对象语法

您可以看到,上面我们使用嵌套对象符号来定义我们的颜色,其中嵌套键作为修饰符添加到基础颜色名称中:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        light: '#b3bcf5',
        DEFAULT: '#5c6ac4',
        dark: '#202e78',
      }
    }
  }
}

颜色名称的不同分段组合成类名,如 ​bg-indigo-light​。

和 Tailwind 的很多地方一样,​DEFAULT ​键很特殊,意思是”没有修饰符”,所以这个配置会生成 ​text-indigo​ 和 ​bg-indigo​ 这样的类,而不是 ​text-indigo-DEFAULT​ 或 ​bg-indigo-DEFAULT​。

您也可以将颜色定义为简单的字符串而不是对象。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      'indigo-lighter': '#b3bcf5',
      'indigo': '#5c6ac4',
      'indigo-dark': '#202e78',
    }
  }
}

请注意,当使用 ​theme()​ 函数访问颜色时,您需要使用与定义颜色相同的符号。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        // theme('colors.indigo.light')
        light: '#b3bcf5',

        // theme('colors.indigo.DEFAULT')
        DEFAULT: '#5c6ac4',
      },

      // theme('colors.indigo-dark')
      'indigo-dark': '#202e78',
    }
  }
}

扩展默认颜色

正如 主题文档 中所述,如果您想扩展默认的调色板,而不是覆盖它,您可以使用您的 ​tailwind.config.js​ 文件中的 ​theme.extend.colors​ 部分来实现。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      }
    }
  }
}

这将生成像 ​bg-regal-blue​ 这样的类,除了所有 Tailwind 的默认颜色。

这些扩展是深度合并的,所以如果您想在 Tailwind 的默认颜色中增加一个额外的阴影,您可以这样做:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          450: '#5F99F7'
        },
      }
    }
  }
}

这将增加像 ​bg-blue-450​ 这样的类,而不会失去像 ​bg-blue-400​ 或 ​bg-blue-500​ 这样的现有的类。

禁用一个默认颜色

如果您想禁用一个默认颜色,因为您没有在项目中使用它,最简单的方法是建立一个新的调色板,不包括您想禁用的颜色。

例如:这个 ​tailwind.config.js​ 文件不包括 teal, orange 和 pink,但包括其余的默认颜色。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      blue: colors.blue
    }
  }
}

另外,您也可以不动调色板,依靠 tree-shaking 未使用的样式 来删除您不使用的颜色。

为您的颜色命名

Tailwind 使用字面的颜色名称(如红色,绿色等)和一个默认的数字比例(其中50为浅色,900为深色)。这对大多数项目来说是相当实用的,但也有充分的理由使用其他的命名惯例。

例如,如果您正在做一个需要支持多个主题的项目,那么使用 ​primary ​和 ​secondary ​这样更抽象的名称可能是有意义的。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

您可以像我们上面那样明确地配置这些颜色,也可以从我们完整的调色板中调入颜色,并对给他们起个别名。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}

您甚至可以使用 CSS 自定义属性(变量)来定义这些颜色,以便于在客户端切换主题。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
      // ...
    }
  }
}
/* In your CSS */
:root {
  --color-primary: #5c6ac4;
  --color-secondary: #ecc94b;
  /* ... */
}

@tailwind base;
@tailwind components;
@tailwind utilities;

请注意,如果没有额外的配置,使用自定义属性定义的颜色将无法与 ​bg-opacity-50​ 等颜色不透明度实用程序一起使用。有关如何使其工作的更多信息,请参阅此示例存储库

生成颜色

我们常见的一个问题是”如何生成自己自定义颜色的 50-900 种色调?“。

坏消息是,颜色是复杂的,尽管尝试了几十个不同的工具,我们还没有找到一个能很好地生成这种调色板的工具。我们手工挑选了所有 Tailwind 的默认颜色,用眼睛仔细地平衡它们,并在实际设计中测试它们,以确保我们对它们感到满意。

调色板参考

当您把 ​tailwindcss/colors​ 导入到您的 ​tailwind.config.js​ 文件中时,这是所有可用颜色的列表。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      // Build your palette here
      transparent: 'transparent',
      current: 'currentColor',
      gray: colors.trueGray,
      red: colors.red,
      blue: colors.sky,
      yellow: colors.amber,
    }
  }
}

虽然每种颜色都有一个特定的名称,但我们鼓励您在自己的项目中按照自己的喜好给它们起别名。



以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号