【记录】CSS｜Tailwind 的主题定义的颜色的使用方法（--color啥的）

文章目录

[【记录】CSS｜Tailwind 的主题定义的颜色的使用方法（--color 啥的）](#【记录】CSS｜Tailwind 的主题定义的颜色的使用方法（--color 啥的）)
- 省流版
- [GPT 详细解释版](#GPT 详细解释版)
- - [Tailwind CSS 配置文件示例](#Tailwind CSS 配置文件示例)
  - 使用自定义颜色
  - [定义 CSS 变量](#定义 CSS 变量)
  - 总结
- [附赠个 Tips](#附赠个 Tips)

【记录】CSS｜Tailwind 的主题定义的颜色的使用方法（--color 啥的）

参考：

Customizing Colors - Tailwind CSS

主要参考的是 GPT 的说辞。

省流版

总之就是，theme: extend: 里能定义一些什么东西，然后某某 Color后面可以加多层字典{}。

最后用的时候就是：某某-字典 key-字典 key。

例如 tailwind.config.js 文件里：

js 复制代码

theme: {
    screens: {
      sm: "640px",
    },
    extend: {
      textColor: {
        skin: {
          base: withOpacity("--color-text-base"),
          accent: withOpacity("--color-accent"),
          inverted: withOpacity("--color-fill"),
        },
      },
    },
  },

用的时候就className="text-skin-base"。

f12 去看就这样：

GPT 详细解释版

在你的 Tailwind CSS 配置文件中定义了自定义颜色之后，你可以在实际的代码中通过类名来使用这些颜色。以下是如何在代码中调用这些颜色的示例，以及如何确保你定义的颜色正确地处理透明度。

Tailwind CSS 配置文件示例

假设你的 tailwind.config.js 文件如下所示：

javascript 复制代码

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  theme: {
    screens: {
      sm: "640px",
    },
    extend: {
      textColor: {
        skin: {
          base: withOpacity("--color-text-base"),
          accent: withOpacity("--color-accent"),
          inverted: withOpacity("--color-fill"),
        },
      },
    },
  },
  plugins: [],
};

function withOpacity(variableName) {
  return ({ opacityValue }) => {
    if (opacityValue !== undefined) {
      return `rgba(var(${variableName}), ${opacityValue})`;
    }
    return `rgb(var(${variableName}))`;
  };
}

使用自定义颜色

在你的组件中，你可以通过 Tailwind CSS 类名来应用这些自定义颜色。例如，在一个 React 组件中：

jsx 复制代码

import React from 'react';

const MyComponent = () => {
  return (
    <div className="p-4">
      <h1 className="text-skin-base">This is a base text color</h1>
      <p className="text-skin-accent">This is an accent text color</p>
      <button className="text-skin-inverted bg-black px-4 py-2">
        Inverted text on black background
      </button>
    </div>
  );
};

export default MyComponent;

在这个示例中：

text-skin-base 将应用你定义的 --color-text-base 颜色。
text-skin-accent 将应用你定义的 --color-accent 颜色。
text-skin-inverted 将应用你定义的 --color-fill 颜色。

定义 CSS 变量

为了让这些自定义颜色起作用，你需要在 CSS 中定义相应的 CSS 变量。例如，在你的全局 CSS 文件中：

css 复制代码

:root {
  --color-text-base: 34, 34, 34; /* 黑色，格式为 r, g, b */
  --color-accent: 255, 99, 71; /* 番茄色，格式为 r, g, b */
  --color-fill: 255, 255, 255; /* 白色，格式为 r, g, b */
}

这样，你的颜色变量就会被解析并在 Tailwind CSS 类中使用。如果你需要支持透明度，可以使用 Tailwind CSS 的 withOpacity 函数，如上面配置文件中的定义。

总结

在 tailwind.config.js 文件中定义自定义颜色。
在组件中使用 Tailwind CSS 类名来应用这些颜色。
在 CSS 文件中定义对应的 CSS 变量。

通过这种方式，你可以在项目中灵活地使用 Tailwind CSS 自定义颜色。

附赠个 Tips

jsx 语法中的 css 属性要用驼峰命名，

例如 max-width 要写成 style={``{maxWidth: "100%"}}。

在 JSX 语法中，CSS 属性需要使用驼峰式命名。例如，max-width 应写成 style={``{maxWidth: "100%"}}。
本账号所有文章均为原创，欢迎转载，请注明文章出处：https://blog.csdn.net/qq_46106285/article/details/140363296。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。