Custom Tailwind Palette for base color #ffa500

50#fff7eb
100#ffeed7
200#ffe6c3
300#ffdeaf
400#ffd69b
500#ffce87
600#ffc573
700#ffbd5e
800#ffb548
900#ffad2e
950#ffa500
yourcolorname: {
        50: "#fff7eb",
	    100: "#ffeed7",
	    200: "#ffe6c3",
	    300: "#ffdeaf",
	    400: "#ffd69b",
	    500: "#ffce87",
	    600: "#ffc573",
	    700: "#ffbd5e",
	    800: "#ffb548",
	    900: "#ffad2e",
	    950: "#ffa500"
      }

How to install

  1. Open your project's root directory and locate the tailwind.config.js file.
  2. Inside the module.exports object, you'll find a theme property. If it doesn't exist, create one. It should look something like this:
    module.exports = {
        theme: {
          // ...
        },
        // ...
    };
  3. Inside the theme object, you'll find various configuration options. To add a custom color scheme, you need to define or override the colors property. If it doesn't exist, create one. Here's an example of how it should look:
    module.exports = {
      theme: {
        colors: {
          // Your color scheme goes here
        },
        // ...
      },
      // ...
    };
  4. Within the colors object, this is where you will copy+paste this custom color scheme. Here's an example of what your tailwind.config.js might look like:
    module.exports = {
      theme: {
        colors: {
          yourcolorname: {
            50: "#fff7eb",
    	    100: "#ffeed7",
    	    200: "#ffe6c3",
    	    300: "#ffdeaf",
    	    400: "#ffd69b",
    	    500: "#ffce87",
    	    600: "#ffc573",
    	    700: "#ffbd5e",
    	    800: "#ffb548",
    	    900: "#ffad2e",
    	    950: "#ffa500"
          }
        },
        // ...
      },
      // ...
    };
  5. Save the tailwind.config.js file.
  6. If you're using a development server like "npm run dev" or "yarn dev", stop and restart the server to ensure the changes take effect. If you're building your project for production, run the appropriate command to build your CSS.
  7. Once the server is running or the CSS is built, you can use your custom color scheme classes in your HTML or JSX files by referencing the color names you defined in the tailwind.config.js file. For example:
    <div class="bg-yourcolorname-400">This div has a custom background color.</div>
    <div class="text-yourcolorname-800">This text has a custom text color.</div>

Learn more about customizing your Tailwind installation, and customizing Tailwind colors.