Custom Tailwind Palette for base color #5f9ea0

50#f0f6f6
100#e2eded
200#d3e4e4
300#c5dbdc
400#b7d2d3
500#a8c9ca
600#9ac1c2
700#8cb8b9
800#7dafb1
900#6ea7a8
950#5f9ea0
yourcolorname: {
        50: "#f0f6f6",
	    100: "#e2eded",
	    200: "#d3e4e4",
	    300: "#c5dbdc",
	    400: "#b7d2d3",
	    500: "#a8c9ca",
	    600: "#9ac1c2",
	    700: "#8cb8b9",
	    800: "#7dafb1",
	    900: "#6ea7a8",
	    950: "#5f9ea0"
      }

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: "#f0f6f6",
    	    100: "#e2eded",
    	    200: "#d3e4e4",
    	    300: "#c5dbdc",
    	    400: "#b7d2d3",
    	    500: "#a8c9ca",
    	    600: "#9ac1c2",
    	    700: "#8cb8b9",
    	    800: "#7dafb1",
    	    900: "#6ea7a8",
    	    950: "#5f9ea0"
          }
        },
        // ...
      },
      // ...
    };
  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.