如何为tailwind-css添加新颜色并保留原始颜色？

您可以轻松地向 Tailwind CSS 添加新颜色，并使用自定义配置保留原始颜色。您可以在tailwind.config.js文件的主题部分中的颜色键下配置颜色。

按照以下步骤将tailwind.config.js文件添加到您的文件夹中。

第 1 步：将以下代码运行到文件夹的终端。这将创建一个package.json文件。

npm init 

第 2 步：将以下代码复制并粘贴到文件夹的终端。这将为顺风创建所需的节点模块。

npm install tailwindcss@latest postcss@latest autoprefixer@latest

第三步：创建公用文件夹，在公用文件夹内添加index.html、style.css、 tailwind.css 。

第 4 步：在tailwind.css文件中添加以下代码。使用此文件，您可以自定义您的顺风 CSS 以及默认样式。 Tailwind 将在构建时将这些指令与它根据您配置的设计系统生成的所有样式交换出来。

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

第 5 步：打开package.json文件并在脚本部分下，添加以下代码

“scripts”: {
“build:css”: “tailwind build public/tailwind.css -o public/style.css”
},

第 6 步：在终端中运行以下代码。这将使用预定义的 Tailwind CSS 代码填充您的style.css文件。

npm run build:css

第 7 步：最后，运行以下代码。这将使用安装tailwindcss npm 包时包含的 Tailwind CLI 实用程序为您的项目生成 Tailwind 配置文件。

npx tailwindcss init

句法：

colors: {
    // each color has a specific name. you can replace 
    // 'custom-color' with the name you like
    // replace '#66bbfa' with the colors you like.
    'custom-color': '#66bbfa'
}

将以下代码添加到您的tailwind.config.js文件中，现在您可以通过添加自己的颜色代码来自定义颜色。

tailwind.config.js

const colors = require('tailwindcss/colors')
  
module.exports = {
  mode: 'jit',
  theme: {
    extend: {
      colors: {
      // Configure your color palette here
       'custom-green':'#66bb6a',
      },
    },
  },
  variants: {},
  plugins: [],
}

例子 ：

HTML

    

        GeeksforGeeks
    
    Tailwind CSS Customize colors
      
    

        GEEKSFORGeeks
    

  

输出：