In our previous post, we focused on positioning various elements in our application using Tailwind CSS. Now, let's bring some vibrancy into our design by adding colors. Tailwind CSS offers a versatile color palette that we can easily incorporate into our project.
Exploring Tailwind's Color Palette
Tailwind CSS provides a variety of color options, each with multiple shades. The color names include options like "slate", "gray", "zinc", and many others. Each color has predefined shades ranging from 50 (the lightest) to 950 (the darkest). This structured palette helps us maintain consistency across our design.
Changing the Background Color
Let's start by changing the background color of our page. We can do this by setting a class on the body element.
Example:
<body className="bg-orange-50 flex flex-col px-4 py-2 min-h-screen">
...
</body>Here, bg-orange-50 sets the background color to a light shade of orange. If this shade is too light or dark, you can adjust the number to pick the perfect shade.
Styling the Navigation Links
Next, we want to ensure our navigation links stand out. To keep our code clean, we'll first extract the navigation bar into a separate component.
Creating a NavBar Component
Create a new file NavBar.jsx inside a components folder.
// components/NavBar.jsx
import Link from 'next/link';
export default function NavBar() {
return (
<nav>
<ul className="flex gap-2">
<li>
<Link href="/" className="text-orange-800 hover:underline">Home</Link>
</li>
<li>
<Link href="/reviews" className="text-orange-800 hover:underline">Reviews</Link>
</li>
<li>
<Link href="/about" prefetch={false} className="text-orange-800 hover:underline">About</Link>
</li>
</ul>
</nav>
);
}Update the RootLayout to use the new NavBar component.
// RootLayout.jsx
import NavBar from '../components/NavBar';
import './globals.css';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className="bg-orange-50 flex flex-col px-4 py-2 min-h-screen">
<header>
<NavBar />
</header>
<main className="grow py-3">
{children}
</main>
<footer className="border-t py-3 text-center text-xs">
Game data and images courtesy of{' '}
<a href="https://rawg.io/" target="_blank" className="text-orange-800 hover:underline">
RAWG
</a>
</footer>
</body>
</html>
);
}Adding Color to Links
By using the text- utility, we can change the text color of our links. For instance, text-orange-800 sets the text color to a dark shade of orange.
Example:
<Link href="/" className="-orange-800 hover:underline">Home</Link>The hover:underline class ensures that the link text is underlined when the user hovers over it, providing visual feedback.
Applying Styles to the Footer Link
We also want to style the link in the footer similarly. We can directly copy the classes used for the navigation links.
Example:
<footer className="border-t py-3 text-center text-xs">
Game data and images courtesy of{' '}
<a href="https://rawg.io/" target="_blank" className="text-orange-800 hover:underline">
RAWG
</a>
</footer>One small issue might arise with spacing between text and the link in JSX. If there's no space between text nodes and elements, JSX removes the newline, causing text to appear without spaces. A simple workaround is to add a space as an expression:
{' '}Summary
In this post, we explored Tailwind CSS's default color palette and applied some colors to our application. We changed the background color, styled the navigation links, and ensured our footer link matched the overall theme.
Tailwind CSS makes it straightforward to add and customize colors, helping us create a visually appealing and cohesive design. Next, we will focus on styling the main content of our pages, bringing more life and structure to our application. Stay tuned!
For more information on Tailwind's color palette, you can always refer to the official documentation.
Happy coding!
תגובות