Custom Tailwind Palette for base color #ff8c00
50#fff5ea
100#ffead5
200#ffe0c0
300#ffd5ac
400#ffcb98
500#ffc183
600#ffb66f
700#ffac5a
800#ffa144
900#ff972b
950#ff8c00
yourcolorname: {
50: "#fff5ea",
100: "#ffead5",
200: "#ffe0c0",
300: "#ffd5ac",
400: "#ffcb98",
500: "#ffc183",
600: "#ffb66f",
700: "#ffac5a",
800: "#ffa144",
900: "#ff972b",
950: "#ff8c00"
}
How to install
- Open your project's root directory and locate the tailwind.config.js file.
- 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: { // ... }, // ... };
- 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 }, // ... }, // ... };
- 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: "#fff5ea", 100: "#ffead5", 200: "#ffe0c0", 300: "#ffd5ac", 400: "#ffcb98", 500: "#ffc183", 600: "#ffb66f", 700: "#ffac5a", 800: "#ffa144", 900: "#ff972b", 950: "#ff8c00" } }, // ... }, // ... };
- Save the tailwind.config.js file.
- 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.
- 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.