I noticed you used arbitrary values for the color. In Tailwind CSS, you can easily define custom colors to ensure consistency throughout your design.
In your Tailwind CSS configuration file (usually tailwind.config.js
), you can define custom colors under the extend section. For example:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{html,js}"],
theme: {
extend: {
colors: {
'custom-blue': '#007acc',
'custom-green': '#00b894',
// Add more custom colors as needed
},
},
},
plugins: [],
}
Once you've defined your custom colors, you can use them in your HTML just like any other Tailwind utility class:
<p class="bg-custom-blue text-custom-green">Custom Colors</p>
For a more detailed guide and additional options, I recommend checking out this resource on Tailwind's official documentation: Using Custom Colors.