Tailwind CSS 顏色

自定義顏色

為您的項目定制默認(rèn)調(diào)色盤。

Tailwind 包含一個專業(yè)制作的開箱即用的默認(rèn)調(diào)色板，如果您沒有自己的特定品牌，這是一個很好的起點。

但是當(dāng)您需要定制您的調(diào)色板時，您可以在您的 ?tailwind.config.js? 文件的 ?theme ?部分的 ?colors ?鍵下配置您的顏色。

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

當(dāng)涉及到建立一個自定義調(diào)色板時，您可以從我們豐富的調(diào)色板中 策劃您的顏色，或者通過直接添加您的特定顏色值 [配置您自己的自定義顏色] (#custom-colors)。

策劃顏色

如果您沒有一套完全自定義的顏色，您可以從我們完整的調(diào)色板中策劃您的顏色，只需要將 ?'tailwindcss/colors'? 導(dǎo)入您的配置文件中，然后選擇您喜歡的顏色。

// 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.)

盡管每種顏色都有一個特定的名稱，但我們鼓勵您在自己的項目中隨意給它們起別名。我們甚至在默認(rèn)配置中執(zhí)行此操作，將 ?coolGray ?別名為 ?gray?，將 ?violet ?別名為 ?purple?，將 ?amber ?別名為 ?yellow?，將 ?emerald ?別名為 ?green?。

自定義顏色

您可以添加自己的顏色值來建立一個完全自定義的調(diào)色板。

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

默認(rèn)情況下，這些顏色會被所有顏色驅(qū)動的功能類自動共享，如 ?textColor?、?backgroundColor?、?borderColor ?等。

顏色對象語法

您可以看到，上面我們使用嵌套對象符號來定義我們的顏色，其中嵌套鍵作為修飾符添加到基礎(chǔ)顏色名稱中：

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

請注意，當(dāng)使用 ?theme()? 函數(shù)訪問顏色時，您需要使用與定義顏色相同的符號。

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

擴(kuò)展默認(rèn)顏色

正如 主題文檔 中所述，如果您想擴(kuò)展默認(rèn)的調(diào)色板，而不是覆蓋它，您可以使用您的 ?tailwind.config.js? 文件中的 ?theme.extend.colors? 部分來實現(xiàn)。

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

這將生成像 ?bg-regal-blue? 這樣的類，除了所有 Tailwind 的默認(rèn)顏色。

這些擴(kuò)展是深度合并的，所以如果您想在 Tailwind 的默認(rèn)顏色中增加一個額外的陰影，您可以這樣做：

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

這將增加像 ?bg-blue-450? 這樣的類，而不會失去像 ?bg-blue-400? 或 ?bg-blue-500? 這樣的現(xiàn)有的類。

禁用一個默認(rèn)顏色

如果您想禁用一個默認(rèn)顏色，因為您沒有在項目中使用它，最簡單的方法是建立一個新的調(diào)色板，不包括您想禁用的顏色。

例如：這個 ?tailwind.config.js? 文件不包括 teal, orange 和 pink，但包括其余的默認(rèn)顏色。

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

另外，您也可以不動調(diào)色板，依靠 tree-shaking 未使用的樣式 來刪除您不使用的顏色。

為您的顏色命名

Tailwind 使用字面的顏色名稱(如紅色，綠色等)和一個默認(rèn)的數(shù)字比例(其中50為淺色，900為深色)。這對大多數(shù)項目來說是相當(dāng)實用的，但也有充分的理由使用其他的命名慣例。

例如，如果您正在做一個需要支持多個主題的項目，那么使用 ?primary ?和 ?secondary ?這樣更抽象的名稱可能是有意義的。

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

您可以像我們上面那樣明確地配置這些顏色，也可以從我們完整的調(diào)色板中調(diào)入顏色，并對給他們起個別名。

// 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? 等顏色不透明度實用程序一起使用。有關(guān)如何使其工作的更多信息，請參閱此示例存儲庫。

生成顏色

我們常見的一個問題是”如何生成自己自定義顏色的 50-900 種色調(diào)？“。

壞消息是，顏色是復(fù)雜的，盡管嘗試了幾十個不同的工具，我們還沒有找到一個能很好地生成這種調(diào)色板的工具。我們手工挑選了所有 Tailwind 的默認(rèn)顏色，用眼睛仔細(xì)地平衡它們，并在實際設(shè)計中測試它們，以確保我們對它們感到滿意。

調(diào)色板參考

當(dāng)您把 ?tailwindcss/colors? 導(dǎo)入到您的 ?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,
    }
  }
}

雖然每種顏色都有一個特定的名稱，但我們鼓勵您在自己的項目中按照自己的喜好給它們起別名。